React中如何更新对象数组内的已有对象

要实现存在相同job_n则更新对应对象，不存在则添加新对象的需求，只需修改handleChange函数的状态更新逻辑即可：

修改后的完整代码 #

const [azienda, setAzienda] = useState([]);
const handleChange = (e) => {
    const azienda_name = e.target.value;
    const job_n = e.target.name;
    
    setAzienda((prevState) => {
        // 查找数组中是否已有对应job_n的对象
        const targetIndex = prevState.findIndex(item => item.job_n === job_n);
        if (targetIndex !== -1) {
            // 存在则复制原数组并替换对应位置的对象
            const updatedState = [...prevState];
            updatedState[targetIndex] = { azienda: azienda_name, job_n };
            return updatedState;
        } else {
            // 不存在则追加新对象
            return [...prevState, { azienda: azienda_name, job_n }];
        }
    });
};

输入组件代码无需改动：

<input
    type="text"
    name={item.job_n}
    defaultValue={item.azienda}
    readOnly={isReadonly}
    onChange={handleChange}
/>

核心逻辑说明 #

• 用findIndex快速定位数组中是否存在job_n匹配的对象，返回其索引值
• 若找到匹配对象（索引不等于-1），则基于原数组创建新数组，替换对应索引位置的对象为最新值，保证状态不可变性
• 若未找到匹配对象，则直接在原数组末尾追加新对象
• 始终依赖prevState更新状态，避免因React状态更新的异步特性导致的旧值覆盖问题

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