React开发中如何将文件数据存入同一state的selectedFile字段，无需单独新建state？

你完全可以只使用一个state存储所有表单数据，不需要额外创建单独的文件state，修改逻辑如下：

1. 首先删除冗余的files相关state声明：

// 删掉这行代码
const [files, setFiles] = useState([]);

2. 修正文件上传输入框的onChange逻辑：你之前的写法会直接把整个postProduct对象替换为文件列表，导致其他表单字段丢失，要改成把文件列表存入postProduct的selectedFile字段中：

<input
    name="selectedFile"
    type="file"
    multiple={true}
    onChange={(e) => {
        setPostProduct({
            ...postProduct,
            // 把原生的类数组FileList转成普通数组存储，方便后续处理
            selectedFile: Array.from(e.target.files)
        });
    }}
/>

注意事项 #

文件输入属于原生不受控组件，不要给它添加value属性绑定selectedFile的值，否则会触发React报错，当前无value属性的写法是正确的。
修改完成后所有表单数据都统一存储在postProduct这一个state中，提交表单时直接从该state中取对应字段使用即可。

内容的提问来源于stack exchange，提问作者lunar