在 setState 中更新 object 的嵌套數組

Question

我有一個包含多個對象的數組，我想更新 object 中的任何值。 我能夠更新 object 但我的問題是每當我更新陣列內的任何 object 時，父陣列變為 object。 我不想將數組更改為 object。 我正在分享我的代碼和 output 和預期的 output。

this.setState({
        tempArray: {
            ...this.state.tempArray,
            [lineNo]: {
                ...this.state.tempArray[lineNo],
                [pointNo]: {
                  ...this.state.tempArray[lineNo][pointNo],
                  x:parseInt(x),
                  y:parseInt(y)
                }
            }
          }
      },
      ()=>{
        console.log('callback tempArray',this.state.tempArray);
      })

如果我將給定數組中的第一個數組 x:7 更改為 x:10

[[{x:7,y:20}],[{x:50,y:60}],[{x:30,y:40}]]

我的 output 是

[{x:10,y:20},[{x:50,y:60}],[{x:30,y:40}]]

但我預期的 output 是

[[{x:10,y:20}],[{x:50,y:60}],[{x:30,y:40}]]

Answer 1

您將[lineNo]設置為 object。 試試這樣：

tempArray: {
  ...this.state.tempArray,
  [lineNo]: [ // <--- [ instead of {
    ...this.state.tempArray[lineNo],
    [pointNo]: {
      ...this.state.tempArray[lineNo][pointNo],
      x:parseInt(x),
      y:parseInt(y)
    }
  ]// <--- ] instead of }
}