Hochgeladene Dateien können nicht zum Markieren in React ausgewählt werden

Question

Ich verwende React, um einen Datei-Upload zu erstellen. Ich möchte, dass die Statusvariable auf die hochgeladene Datei (.docx oder .pdf) gesetzt wird, sobald die Datei hochgeladen wird. Beim Aufruf von set state wird es jedoch als undefiniert angezeigt.

const [selectedFile, setSelectedFile] = useState(null)

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

const handleImageUpload = (event: { target: { files: any[] } }) =>
    const file = event.target.files[0]
    if (Datei) {
        if (file.size > config?.fileSize) {
            setErrorMessage(config.fileSizeError)
        } else if (file?.name.endsWith(config.type)) {
            setSelectedFile(file)
        } anders {
            reader.readAsDataURL(Datei)
        }
    }
}

Sobald setSelectedFile(file) auftritt, wird selectedFile Ist das ein konkreter Grund, warum es passiert ist?

Answer 1

这是因为当您在控制台中调用或记录它时，您的状态尚未更新。您可以在useEffect钩子中记录您的状态，以便在更新时查看它。以下是一个示例：

useEffect(() => {
    console.log("文件 >> ", selectedFile);
  }, [selectedFile]);

Answer 2

我认为你的代码按预期工作，但是当你尝试调用它时，状态还没有被更新。

根据React官方文档：

set函数只会更新下一次渲染的状态变量。
如果在调用set函数之后读取状态变量，你仍然会得到在调用之前屏幕上的旧值。

现在，这是我的猜测，但你可以尝试添加这段代码：

setSelectedFile(file)

setTimeout(() => {
    console.log(selectedFile); 
}, 5000);