类型错误：传播不可迭代实例和综合事件的无效尝试

Question

我正在尝试使用 React 构建一个 csv 文件上传器。I am getting the "Invalid attempt to spread non-iterable instances" error when the file is selected and I try to set the state with it. 这是我给出该错误的代码：

const IFImport = (props) => {

    const [file, setFile] = useState(null);

    const [loading, setLoading] = useState(false);

  const onUpload = async (e) => {

     const csvFile = e;

     console.log(csvFile)

     setFile(...file, csvFile)

  }

  return (

    <>

      <ContentRow>

        <h1>

          <Link to={"/"}>

            <Button color="link">&lt;</Button>

          </Link>

          Upload Enrollment Information

          <ErrorList error={props.error} />

        </h1>

      </ContentRow>

      <ContentRow>

      <Label>Upload a CSV File for Enrollment</Label>

          <FormGroup>

            <div>

    {file !== null ? <p>{file.name}</p> : ""}

            </div>

            <div>

              <Input

                type="file"

                name="data.file"

                multiple={false}

                onChange={e => onUpload(e)}

                accept="/csv"

              />{" "}

            </div>

          </FormGroup>

      </ContentRow>

    </>

  );

};

export default IFImport;

我认为这是在此 onUpload 函数中设置状态的问题，所以我尝试不在此处设置状态，但后来我只是得到一个合成偶数错误。谁能告诉我处理这种上传的最佳方法？

Answer 1

首先，您试图传播null显然会失败的价值（这是file状态的初始值）。其次 -e不是您要查找的文件，而是 Event 对象。如果要获取上传的文件，请使用const&nbsp;csvFile&nbsp;=&nbsp;e.target.files;相反，它将把用户上传的每个文件保存为一个数组。