React中使用useState再次更新同状态时如何保留对象数组的已更新值

你遇到的更新丢失问题是由状态更新闭包捕获导致的：当前代码在更新状态时直接引用了当前渲染闭包内的translatedResponse旧值。如果短时间内多次调用更新函数，React的状态批处理机制会让所有更新都基于同一个初始旧状态计算，最终只有最后一次更新的结果会被保留，之前的更新都会被覆盖。

使用useState提供的函数式更新语法即可解决，更新时不直接引用当前状态值，而是通过回调函数的参数拿到上一次更新后的最新状态，基于该值计算新状态。

const updateTranslatedResponse = (segmentId, key, value) => {
    setTranslatedResponse(
        // 回调参数prev为React内部维护的最新状态值
        prev => prev.map(
            el => el.segment_id == segmentId ? { ...el, [key]: value } : el
        )
    )
}

修改后连续多次调用updateTranslatedResponse修改不同属性时，每次更新都会基于上一次修改后的最新状态计算，所有修改都会被正常保留，不会出现旧值回退的问题。

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