在React和Typescript中使用FileReader

Question

我想上传json文件使用输入类型文件。当我在fileReder上使用onload方法时，Typescript显示了一个错误-不能调用一个可能为'null'的对象。谢谢你。

const UploadCharacter = () => {
const [data, setData] = useState<any>();
const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.files) {
const fileReader = new FileReader(); 
fileReader.readAsText(e.target.files[0], 'UTF-8')
fileReader.onload((e) => {  <-- Error: Cannot invoke an object which is possibly 'null'.
console.log(e.target.result)
})
}

}
return (
<div className={s.upload}>
<input
className={s.uploadInput}
type="file"
onChange={handleUpload}
/>
</div>
)
}

Answer 1

应该可以:

const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
if (e.target.files && e.target.files[0]) {
const reader = new FileReader();
reader.readAsText(e.target.files[0], 'UTF-8');
reader.onloadend = (readerEvent: ProgressEvent<FileReader>) => {
if (readerEvent?.target?.result) {
setPolicy(readerEvent.target.result.toString());
updatePolicy(readerEvent.target.result.toString());
}
};
}
};