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

Question

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

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

标签： javascriptreactjsreact-hooksreact-functional-component

Answer 1

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

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