React でタグ付けするためにアップロードされたファイルを選択できない

Question

React を使用してファイルのアップロードを作成しています。ファイルがアップロードされるとすぐに、アップロードされたファイル (.docx または .pdf) にステータス変数が設定されるようにしたいと考えています。ただし、set state を呼び出すと、未定義として表示されます。

const [selectedFile, setSelectedFile] = useState(null)

<Input type="file" onChange={handleImageUpload} accept={config.type}/>

const handleImageUpload = (イベント: { ターゲット: { ファイル: any[] } }) => {
    const ファイル =event.target.files[0]
    if (ファイル) {
        if (file.size > config?.fileSize) {
            setErrorMessage(config.fileSizeError)
        else if (file?.name.endsWith(config.type)) {
            setSelectedFile(ファイル)
        } それ以外 {
            Reader.readAsDataURL(ファイル)
        }
    }
}

setSelectedFile(file) が発生すると、selectedFile が未定義として表示されます。これが起こった具体的な理由はありますか?

Answer 1

これは、コンソールを呼び出したりログインしたときにステータスが更新されていないためです。 useEffect フックにステータスを記録すると、更新時にステータスを表示できます。以下に例を示します:

リーリー

Answer 2

コードは期待どおりに動作すると思いますが、コードを呼び出そうとしたとき、状態はまだ更新されていません。

React 公式ドキュメントによると :

リーリー

これは私の推測ですが、次のコードを追加してみてください:

リーリー