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);