使用 onChange 函数和 React Hooks 添加多个文件，但单独添加

Question

我需要添加到带有反应组件的文件中。下面是我如何使用一个文件（onChange 和 onSubmit 函数）：

const onChangeFile = e => {
    setFileData(e.target.files[0]);
  };

const onSubmit = e => {
    e.preventDefault();

    const newItem = new FormData();
    newItem.append('item', fileData);

    const { description } = offerData;

    newItem.append('description', description);

    addItem(newItem);

    setFileData(null);
  }

输入（反应带）：

<CustomInput
     type="file"
     name="item" id="item" label="Choose item image..."
     onChange={onChangeFile}
/>

在这里，我如何处理多个文件，但只有一个输入：

const onChangeFile = e => {
    setFileData(e.target.files);
  };

const onSubmit = e => {
    e.preventDefault();
    const newItem = new FormData();
    for (const key of Object.keys(fileData)) {
      newItem.append('item', fileData[key])
    }

    const { description1, description2 } = item;

    newItem.append('description1', description1);
    newItem.append('description2', description2);

    addItem(newItem);
    setFileData(null);
  }

然后输入：

<CustomInput
     type="file"
     name="item"
     id="item"
     multiple
     label="Add images/image..."
     onChange={onChangeFile}
/>

两者都有效，但这次我想添加多个文件（正好两个），有两个单一输入，我的 useState 钩子不起作用（就像它不可迭代一样）。以下是两种方式的外观。

const [fileData, setFileData] = useState(null);

那么，如何用两个图像添加一个对象，但添加两个单个输入？

Answer 1

不确定我是否完全理解。因此，您现在拥有一个输入来接收数据的方式，但是您希望能够从两个输入更新您的状态？

当你设置状态时，你正在做：

const onChangeFile = e => {
    setFileData(e.target.files);
};

如果同一处理程序连接到另一个输入，则第二组文件将覆盖第一组。

如果您想继续添加到您的状态，您可以使用对象或数组。所以 onChange 可能看起来像这样：

const onChangeFile = e => {
    // assuming here that e.target.files is an array already
    const filesToAdd = e.target.files;
    setFileData([...filesData, ...filesToAdd]);
};

或者用一个对象

const onChangeFile = e => {
    const filesToAdd = e.target.files.reduce(
                         (map, file) => ({..., [file.name]: file}), {}));
    const filesDataUpdate = {
         ...filesData,
         ...filesToAdd
    }
    setFileData(filesDataUpdate);
};

在这种情况下，我假设每个文件都有一个唯一的名称。您可以使用任何唯一值对其进行键控。

希望有帮助！