React中無法選擇上傳的檔案進行標記
P粉312631645
2023-08-15 20:43:24
<p>我正在使用React建立檔案上傳。我希望在文件上傳後立即將狀態變數設定為已上傳的檔案(.docx或.pdf)。但是當呼叫set state時,它顯示為undefined。 </p>
<pre class="brush:php;toolbar:false;">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)
}
}
}</pre>
<p>一旦發生<code>setSelectedFile(file)</code>,它顯示<code>selectedFile</code>為undefined。這是發生的特定原因嗎? </p>
這是因為當您在控制台中呼叫或記錄它時,您的狀態尚未更新。您可以在
useEffect
鉤子中記錄您的狀態,以便在更新時查看它。以下是一個範例:我認為你的程式碼按預期工作,但是當你嘗試呼叫它時,狀態還沒有被更新。
根據React官方文件:
現在,這是我的猜測,但你可以嘗試加入這段程式碼: