React中无法选择上传的文件进行标记

Question

我正在使用React创建文件上传。我希望在文件上传后立即将状态变量设置为已上传的文件（.docx或.pdf）。但是当调用set state时，它显示为undefined。

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 (file) {
        if (file.size > config?.fileSize) {
            setErrorMessage(config.fileSizeError)
        } else if (file?.name.endsWith(config.type)) {
            setSelectedFile(file)
        } else {
            reader.readAsDataURL(file)
        }
    }
}

一旦发生setSelectedFile(file)，它显示selectedFile为undefined。这是发生的特定原因吗？

Answer 1

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

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

Answer 2

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

根据React官方文档：

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

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

setSelectedFile(file)

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