在 React JS useState 中再次更新相同状态时如何保持对象值的更新状态数组？

Question

我正在使用 React 功能组件，显然，useState 挂钩有助于创建和更新状态值。我通常在函数中编写更新功能来更新对象数组。当我更新时，它会更新值，当我再次调用相同的函数来更新其他一些值时，它会正确更新，但之前更新的值又回到旧值，并且不会保留更新后的值。

const updateTranslatedResponse = (segmentId, key, value) => {
    setTranslatedResponse(
        translatedResponse.map(
            el => el.segment_id == segmentId ? { ...el, [key]: value }: el
        )
    )
}

Answer 1

在 useState 挂钩中使用 prev 参数。 useState 挂钩是异步的。

const updateTranslatedResponse = (segmentId, key, value) => {
    setTranslatedResponse( prevTranslatedResponse =>
        prevTranslatedResponse.map(
            el => el.segment_id == segmentId ? { ...el, [key]: value }: el
        )
    )
}