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

Question

我需要添加到具有react组件的文件中。以下是我如何使用一个文件(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);
}

输入(reatstrap(：

<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);
};

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

希望能有所帮助！