无法将数据从嵌套文件上传 React 组件传递到父组件答案

【问题标题】：Not able to pass Data From Nested File Upload React Component to Parent Component无法将数据从嵌套文件上传 React 组件传递到父组件
【发布时间】：2020-11-04 01:31:05
【问题描述】：

我有使用 Material UI 文件上传代码的 React 组件，它运行良好，我可以读取我上传的文件的内容。但是，我很难将这些数据传递到父组件或托管组件中，因为我的目标是然后将这些数据传递到同样托管在该父组件中的另一个组件。父母不会使用这些数据，分离的原因是我可以在其他地方使用这个文件上传，而不是绑定到应用程序的任何部分。此外，我正在使用 React Hooks！

所以，下面只是处理从文件上传读取的数据的代码的主要部分，然后是托管文件上传组件的代码 -

这是子组件（仅限相关代码）-

const FileUpload = props => { 
const [selectedFile, setSelectedFile]= useState(null); 
const {data} = props;

const [results, setResults] = useState(null); 
let contentReader; 

const handleFileRead =(e)=>{ 
   setResults(contentReader.result);
   data(contentReader.results);
 }   

 const handleselectedFile=(e)=>{ 
    setSelectedFile(e.target.files[0].name) 

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

这是父母或主人 -

const Host = props => {


  const [childContent, setChildContent] = useState('');


  return (
     <React.Fragment>
      <Grid>
        <Grid>

          <div>
            </div>
              <Upload data={setChildContent}/>
            </div>
            <div>
              {console.log(childContent)}
            </div>
        </Grid>
       </Grid>
      )
    }
  </React.Fragment>
)

}

所以，我的问题是，当我单击文件上传上的按钮，读取文件内容，然后传递给父级或主机时，我可以在哪里传递到不同的组件？

【问题讨论】：

应该可以工作，你有没有调试过handleFileRead调用和数据以及contentReader.results？
是的，我做到了。将 console.log 放在 Reader.results 内容上会输出结果。此外，如果在子组件的返回中来自 useState 的输出结果，它会显示内容。但是，如果我将 console.log 放在 handleFileRead 结果中，则为空

标签： reactjs react-hooks

【解决方案1】：

你没有错字吗？

contentReader.results

不应该

contentReader.result

这里 - data(contentReader.results);

【讨论】：