javascript - 如何使用 setState 在类组件中以正确的方式更新数组内对象的属性？

Question

我在状态中有一个对象数组，其结构如下:

const arrayOfTests = [
    {
        id: 1,
        name: "test1",
        description: "test description"
    },
    {
        id: 2,
        name: "test2",
        description: "test description"
    },
    {
        id: 3,
        name: "test3",
        description: "test description"
    }
]

假设我找到 id 为 3 的对象，如下所示:

let object3 = arrayOfTests.find((element) => {
    return element.id === 3;
})

然后我像这样编辑它:

object3.description = "new description"

我有点困惑如何使用 setState用新的更新对象替换/编辑旧对象 3。

Answer 1

使用 map()方法如下图。
在回调函数中，检查条件是否element.id === 3是真的;如果是，则返回一个新对象。否则，返回当前 element照原样。

let newState = arrayOfTests.map((element) => {
    if (element.id === 3) {
       return { ...element, description: "new description" };
    }
   
    return element;
});

传递 map() 返回的数组状态 setter 函数的方法。

this.setState({ state: newState });