Javascript 值未在React组件中持久化

我有一个react组件，在其中我从上传读取一个文件，我需要将内容传递到子组件上进行显示。现在，我可以使用FileReader成功地读取文件的内容，console.log会显示结果，但是我要用于传递到子组件的变量始终为null。我哪里做错了？代码并不是什么了不起的东西：

   const Upload = props => {
     const [file, setFile] = useState(null);
     let results;
     let contentsFromFile;

   const handleFileRead = (e)=>{
      results = contentFromFile.result;
      console.log(results);
   }

   const handleSelectedFile = (e)=>{
        setFile(e.target.files[0].name)

        contentsFromFile = new FileReader();
        contentsFromFile.onloadend = handlFileRead;
        contentsFromFile.readAsText(e.target.files[0]);
  }

  return(

   /*Upload file input is here but showing this as NOT relevant to question*/

   <DisplayResults results={results} />
  );
 }
 export default Upload

const Upload=props=>{
const[file，setFile]=useState（null）；
让结果；
让内容从文件；
常量handleFileRead=（e）=>{
结果=contentFromFile.result；
控制台日志（结果）；
}
const handleSelectedFile=（e）=>{
setFile（e.target.files[0].name）
contentsFromFile=newfilereader（）；
contentsFromFile.onloadend=handlFileRead；
contentsFromFile.readAsText（e.target.files[0]）；
}
返回(
/*上传文件输入在这里，但显示这与问题无关*/
);
}
导出默认上载

因为我使用的是React钩子，所以我只需要使用useState（null）设置另一个常量，将值保存到设置文件时所示的状态。

将

结果

转换为状态变量，就像

文件

一样。它真的为null吗？应为未定义。我尝试将结果添加到useState，但render引发错误