Question

我正在使用React和TypeScript。

import React from 'react';
import XLSX from 'xlsx';
interface PropsType {
  files: File
}
const ParsingFile:React.FC<PropsType> = ({files}) => {
  const [file, setFile] = useState(emptyFile);
  const [rfile, setRfile] = React.useState<XLSX.WorkBook>();
  const readFile = (file:File) =>{
    const reader = new FileReader();
    reader.onload = (e:any) => {
      const bstr = e!.target!.result;
      const wb = XLSX.read(bstr, {type: 'binary'});
      setRfile(wb);
    }
    reader.readAsBinaryString(file);
  }

  return(
     <div>
       {readfile(file)} // this line
     </div>
   )
}

这会引发错误，

Type 'void' is not assignable to type 'ReactNode'
The expected type comes from propeprty 'children' which is declared here on type
'DetailedHTMLProps<HTMLDivElement>, HTMLDivElement>'

但是如果我有

<div>
  <React.Fragment>
    {readFile(file)}
  </React.Fragment>
</div>

它不会引发错误。
这是我的问题，
1.为什么void函数不能单独使用？
2.如何在没有其他组件的情况下进行修复？

提前谢谢！
编辑
在该组件（ParsingFile）中，我想要一个Reading excel文件，解析和编写新的excel文件。

Answer 1

似乎readFile方法只需要运行一次，并且要在组件初始化时运行？在这种情况下，我建议您充分利用react挂钩。

useEffect钩中的第二个参数采用一个空数组，该数组“告诉”您的组件该效果不依赖于任何其他值，并且永远不需要重新渲染。您可能会在here上阅读有关此常见的React Hook优化技术的更多信息。

const ParsingFile:React.FC<PropsType> = ({files}) => {
  const [file, setFile] = useState(emptyFile);
  const [rfile, setRfile] = React.useState<XLSX.WorkBook>();

  useEffect(() => {
   readFile(file);
  }, []);

   const readFile = (file:File) =>{
    const reader = new FileReader();
    reader.onload = (e:any) => {
      const bstr = e!.target!.result;
      const wb = XLSX.read(bstr, {type: 'binary'});
      setRfile(wb);
    }
    reader.readAsBinaryString(file);
  }

  return(
     <div>
        // other content
     </div>
   )
}

如何避免打字稿中出现空白

1 个答案: