javascript - 为什么我的类型在 React 和 TypeScript 中为 null？

Question

我有一个基于函数的子组件。

interface ChildProps {
  files: File
}
const Child:React.FC<ChildProps> = ({files}) => {
  const [file, setFile] = React.useState(files);
  const emptyFile = new File([""], " ");
  React.useEffect(() => {
    if(files !== null || files !== undefined){
      setFile(files)
    }
    else{
      setFile(emptyFile)
    }
  })
  return (
    <div>
      {file!.name}
    </div>
  )
};

我在 {file!.name} 上收到 TypeError: Cannot read property 'name' of null 错误。但我认为它至少应该是emptyFile，而不是null。
所以我的问题是，
1.为什么为空？我想我用 if 语句处理 null 情况
2. 如何解决这个问题？

提前致谢

Answer 1

根据 ChildProps 接口(interface)，您应该只能在此处获取有效文件。另一方面，您尝试检查父级的 files 属性是否有效。所以你很可能从父级传递一些 null 。第一个错误是您检查文件的条件:if(文件 !== null || 文件 !== 未定义) {}如果您的 files 为 null，那么您会在第一个语句中得到 false，但它不是未定义的，因此条件为 true。你应该尝试这样的事情:

interface ChildProps {
  files: File
}

const Child:React.FC<ChildProps> = ({files}) => {
  const [file, setFile] = React.useState(files);
  const emptyFile = new File([""], " ");

  React.useEffect(() => {
    if(!!files){
      setFile(files)
    }
    else{
      setFile(emptyFile)
    }
  }, [files]);

  return (
    <div>
      {file!.name}
    </div>
  )
};

尽管最好的选择是只显示文件，而不是将 prop 重写到本地状态。所以你可以尝试这样的事情:

interface ChildProps {
  files: File
}
const Child:React.FC<ChildProps> = ({files}) => {

  return (
    <div>
      {files ? files.name : ""}
    </div>
  )
};