React组件值无法持久化求助：文件内容无法传给子组件

你的问题核心在于没有用React状态来管理results变量，而是用了普通的let变量——React不会追踪普通变量的变化，所以即使你在handleFileRead里更新了results，组件也不会重新渲染，子组件DisplayResults自然拿不到最新的值。

另外你的代码里还有两处拼写错误（虽然你说控制台能正常打印，大概率是输入代码时的笔误，但还是得指出来避免后续隐患）：

• 回调函数名写错：handlFileRead应该是handleFileRead（少了一个e）
• 变量名引用错误：contentFromFile.result应该是contentsFromFile.result（和你声明的变量名不一致）

修正步骤 #

1. 把results改成React状态变量，用useState声明，让React能追踪它的变化
2. 修正拼写错误，确保文件读取的回调逻辑能正确执行
3. 在handleFileRead里用状态更新函数修改results，触发组件重新渲染

修正后的代码 #

const Upload = props => { 
  const [file, setFile] = useState(null); 
  // 将results改为React状态变量
  const [results, setResults] = useState(null); 
  let contentsFromFile; 

  const handleFileRead = (e)=>{ 
    // 修正变量引用，并用状态更新函数赋值
    const fileContent = contentsFromFile.result;
    setResults(fileContent);
    console.log(fileContent); 
  } 

  const handleSelectedFile = (e)=>{ 
    setFile(e.target.files[0].name);
    contentsFromFile = new FileReader(); 
    // 修正回调函数名
    contentsFromFile.onloadend = handleFileRead; 
    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;

为什么这样能解决问题？ #

• React的状态变量（通过useState创建）属于React的状态管理体系，当你调用setResults更新状态时，React会自动触发组件重新渲染，此时子组件DisplayResults就能接收到最新的results值。
• 普通的let变量不在React的追踪范围内，更新它不会触发任何渲染动作，所以子组件一直拿到的是初始的null值。

内容的提问来源于stack exchange，提问作者Andy5