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钩子中记录您的状态，以便在更新时查看它。以下是一个示例：useEffect(() => { console.log("文件 >> ", selectedFile); }, [selectedFile]);我认为你的代码按预期工作，但是当你尝试调用它时，状态还没有被更新。
根据React官方文档：
现在，这是我的猜测，但你可以尝试添加这段代码：
setSelectedFile(file) setTimeout(() => { console.log(selectedFile); }, 5000);