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

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 csvFile = e.target.files;

相反，它将把用户上传的每个文件保存为一个数组。