更新數組中 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
                }
        })
    };
});