Typescript 和 React 文件上传（打字）

Question

我刚开始使用 TypeScript，所以请记住。我正在尝试在 React/TS 中实现一个简单的文件上传。总的来说，我不认为我理解如何初始化对象，比如在 useState 中，并正确处理可能性。例如，考虑这段代码，当用户单击上传按钮时我运行是一个函数，我尝试从状态读取文件并将其放入 formData 以将其发送到我的 api 端点）：


const [fileSelected, setFileSelected] = React.useState<File>() // also tried <string | Blob>

const handleImageChange = function (e: React.ChangeEvent<HTMLInputElement>) {
    const fileList = e.target.files;

    if (!fileList) return;
    
    setFileSelected(fileList[0]);
  };

   const uploadFile = function (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) {
    const formData = new FormData();
    formData.append("image", fileSelected, fileSelected.name);

     // line above ^ gives me the error below
  };
}

'string | Blob | undefined' 类型的参数不是可分配给 'string | Blob' 类型的参数。类型 'undefined' 不可分配给类型 'string | Blob'.ts(2345)

你应该如何在 useState 中初始化你的对象？如果您不进行初始化，就像这里那样，您是否必须继续检查 null 以使编译器满意？我刚刚在 UploadFile 中添加了一个检查以查看 fileSelected 是否为空。但是后来我不得不再做一次以引用 fileSelected.name.

那么对于对象，尤其是像这种 File 类型的对象，你应该如何处理它的初始化呢？而且，一般来说，如何处理对象类型？

这并不重要，但这是标记部分：

        <Container className={classes.container}>
          <label htmlFor="photo">
            <input
              accept="image/*"
              style={{ display: "none" }}
              id="photo"
              name="photo"
              type="file"
              multiple={false}
              onChange={handleImageChange}
            />

            <Button
              className={classes.buttons}
              component="span"
              variant="contained"
              onClick={uploadFile}
            >
              Choose Picture
            </Button>
          </label>
        </Container>

Answer 1

当您在未设置 initial/default 值的情况下调用 useState 时，除了预期类型之外，该类型还将包括 undefined。在这里，您使用了通用 <File> 来告诉 useState 期望的类型。但是因为你没有设置值就发起了，所以 fileSelected 的类型变成了 File | undefined.

这很好，因为它准确地反映了状态中不会总是存在 File 对象的现实。但这确实意味着我们必须在使用它之前检查 fileSelected 的值。只需添加一个 if 语句，您的 formData.append() 调用在运行时或打字稿编译器中就不会出现任何问题。接口 File 扩展了 Blob，因此在我们排除 undefined.

的可能性后，将它分配给 string | Blob 没有问题

const uploadFile = function (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) {
    if (fileSelected) {
        const formData = new FormData();
        formData.append("image", fileSelected, fileSelected.name);
    }
};

Playground Link

Typescript 和 React 文件上传（打字）

Typescript and React with File Upload (typing)

file-upload

typescript

reactjs

use-state