React useState - 文件读取器未更新

Question

我使用以下代码从文件上传(XML(中获取值。但控制台输出始终未定义。

有人会指出我的错误吗？

我的JS代码：

export default function XYZ() {
...
const [xmlUpload, setXmlUpload] = useState(null);
function uploadXMLHandler(e) {
setXmlUpload(e.target.files[0]);
}
useEffect(() => {
if (xmlUpload != null) {
var convert = require('xml-js');
var fileReader = new FileReader();
var result =  fileReader.readAsText(xmlUpload);   
console.log(result);
}
});

...

我的 HTML 代码是

<div className="uploadXML">
<input type="file" onChange={uploadXMLHandler} />
</div>

Answer 1

你用错了 FileReader。FileReader#readAsText不会立即返回结果，它会开始异步读取。完成后，它将触发load事件。所以你应该听那个事件，像这样：

var fileReader = new FileReader();
fileReader.onload = () => console.log(fileReader.result);
var result =  fileReader.readAsText(xmlUpload);