React提交后将对象添加至数组的实现问题求助

存在的问题 #

1. 错误篡改了list的类型：list初始是数组，但你在setList里使用对象展开语法（{...prevState, work}），把数组转成了带work属性的对象，和你期望的数组结构完全不符。
2. 异步更新导致状态不一致：setWork是异步操作，调用后立即使用work拿到的是更新前的旧值，会导致添加到list的不是最新的work对象。
3. 未重置输入状态：提交后没有清空work的内容，不方便用户输入下一条数据。

修正后的代码 #

const add = (e) => {
    e.preventDefault();
    if(companyValue){
        // 生成更新后的work对象
        const updatedWork = {
            ...work,
            company: companyValue
        };
        // 更新list数组，添加新的work对象
        setList(prevList => [...prevList, updatedWork]);
        // 重置work为初始状态，准备下一次输入
        setWork({company:"" , jobTitle:"", jobType:"", location:""});
    }
}

更严谨的函数式更新写法 #

如果想避免依赖当前work的快照，可使用函数式更新确保状态准确性：

const add = (e) => {
    e.preventDefault();
    if(companyValue){
        setWork(prevWork => {
            const updatedWork = {
                ...prevWork,
                company: companyValue
            };
            // 基于list的最新状态添加元素
            setList(prevList => [...prevList, updatedWork]);
            // 返回重置后的work状态
            return {company:"" , jobTitle:"", jobType:"", location:""};
        });
    }
}

补充说明 #

• 往数组添加元素时，必须用[...prevList, newItem]创建新数组，符合React不可变状态的要求。
• 如果jobTitle、jobType、location也有对应输入，要在各自的onChange事件里同步更新work状态，这样添加到list的才是完整的工作信息对象。

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