字段未使用 useForm Inertia 挂钩中的 setData 方法进行更新

Question

我正在使用带有 Inertia 和 React 的 useForm 钩子设置值。我有一个用于上传文件和其他输入文本字段的表单。文本字段已正确更新，但文件未到达 Laravel 后端。

如果我控制台信息，一切看起来都不错，但信息根本没有更新

输入文件

<input
 type="file"
 name="EventFile[]"
 onChange={(e) => addFiles(e)}
 ref={inputFile}
 className="file:px-4 file:py-2 file:border-0 file:bg-yellow file:text-white file:font-bold file:drop-shadow-none file:cursor-pointer text-transparent"
 multiple
/>

功能：

//State
const [files, setFiles] = useState([]);

// Add files
const addFiles = (event) => {

    console.log("event files", event.target.files);

    const addedFiles = [...event.target.files];

    setFiles(addedFiles);

};


// Update values for submit
useEffect(() => {
    console.log("EventFile", files);

    setData("EventFile", files);

    console.log("after set data", data);
}, [files]);

控制台中的事件文件看起来不错

当我提交表单时，我的字段（EventFile）为空

我也尝试在 addFiles 方法中添加 setData 但得到了相同的结果

什么可能导致文件字段无法更新？

Answer 1

我注意到已经过去很长时间了，其他人也遇到了同样的问题。我通过改变调用 setData 方法而不是使用它的方式解决了这个问题。

setData("EventFile", files);

我改为

setData((data) => ({
    ...data,
    EventFile: addedFiles,
}));
setData((data) => ({
    ...data,
    EventFileName: [...filesNames, ...filesFormatArray],
}));
setData((data) => ({
    ...data,
    EventEditFiles: true,
}));

基本上有时 setData 会在多次调用时失败，因此需要更新才能使用这种方式

setData(data => ({ ...data, thingOne: 'something'}));
setData(data => ({ ...data, thingTwo: 'not nothing'}));
setData(data => ({ ...data, thingThree: 'words'}));