更新数组中 object 的 state - React

Question

我有一个 state 并且在 state 中有一个包含多个对象的列表。 我基本上想做的是从这个数组中获取一个索引，在本例中为[0] ，并更改它的 state。 所以，简而言之，我想采用{id: "1", value: "world1"} ，并将 id 更改为'something' 。 我做了一个代码，但它没有像我预期的那样出来。

this.state = {
   myState: [
              { id: "1", value:"world1" },
              { id: "2", value:"world2" },
              { id: "3", value:"world3" },
            ]
   }

const result = this.setState(prevState => ({
      myState: {
        ...prevState[0].id,
        id: 'something'
      }
    }))

控制台日志（结果）

Answer 1

不知道你为什么需要这个，但我在这里看到的问题是 myState 最初是一个数组，然后你将它作为 object 传递回来。

尝试这个：

const result = this.setState(prevState => {
  prevState.myState[0].id = 'something';
  return prevState;
})

Answer 2

 const state = { myState: [{ id: "1", value: "world1" }, { id: "2", value: "world2" }, { id: "3", value: "world3" }, ] } const setState = (({ myState }) => { const newState = { myState: [...myState] } const array = newState.myState const targetIndex = array.findIndex(({ id }) => id === '1') const item = array[targetIndex] array[targetIndex] = {...item, id: 'something' } return newState; }) console.log(setState(state))

Answer 3

使用 Array.prototype.map 和 object 扩展运算符

this.setState(prevState => {
    return {
        myState: prevState.myState.map(
            myStateItem => {
                if(myStateItem.id === '1') {
                    return {
                        ...myStateItem,
                        id: 'something'
                    }
                }
                return {
                    ...myStateItem
                }
        })
    };
});