Javascript ReactJS更新二维数组中的单个值

我正在尝试更新二维数组的单个值

注意： 我提到下列问题

我使用以下代码创建二维数组

export default function(
    numrows = 16,
    numcols = 10,
    initial = { value: 0, color: 'wheat' },
) {
    let arr = new Array(numrows).fill().map(function() {
        return new Array(numcols).fill(initial);
    });
    return arr;
}

---

我使用上述函数在构造函数中生成初始数组，并在视图中以表格的形式显示它

单击一个按钮，我想通过调用

updateArray

函数来更新数组的某些值

我面临的问题是

updateArray

函数更新所有 将数组的值设置为“4”，而不是仅更新

\u gridArray[1][2]。值=4

和

\u gridArray[0][2]。值=3

那么，我的问题是，如何仅更新2D数组的特定值？

检查此应用程序的演示

class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
      gridArray: arrayBuilder() //calls above function
    };
  }

  renderTable = () => {
    return this.state.gridArray.map((data, i) => {
      return <TableRow key={i} row={data} />;
    });
  };

  updateArray = () => {
    let _gridArray = [...this.state.gridArray];
    _gridArray[0][2].value = 3;
    _gridArray[1][2].value = 4;
    this.setState({ gridArray: _gridArray });
  };

  render() {
    return (
      <Fragment>
        <div>
          <button onClick={this.updateArray}>Update Array</button>
        </div>
        <table>
          <tbody>{this.renderTable()}</tbody>
        </table>
      </Fragment>
    );
  }
}

export default Main;

类主扩展组件{
建造师（道具）{
超级（道具）；
此.state={
gridArray:arrayBuilder（）//调用上述函数
};
}
可渲染=（）=>{
返回this.state.gridArray.map（（数据，i）=>{
返回；
});
};
updateArray=（）=>{
让gridArray=[…this.state.gridArray]；
_gridArray[0][2]。值=3；
_gridArray[1][2]。值=4；
this.setState（{gridArray:_gridArray}）；
};
render（）{
返回(
更新数组
{this.renderable（）}
);
}
}
导出默认主；

我还尝试分离数组生成器函数并尝试
在项目外部运行它。它正确地更新了数组值。尝试
运行代码段并检查console中的值


函数createAndUpdate（）{
//创建二维阵列的第1种方法
设arr=newarray（16.fill（）.map（function（））{
返回新数组（10）。填充（0）；
});
控制台.工作台（arr）；
设newarr=[…arr]；
newarr[0][2]=4；
console.table（newarr）；//值已正确更新
//创建二维阵列的第二种方法
设arr2=[]
for（设i=0；i<16；++i）{
设columns2=[]；
对于（设j=0；j<10；++j）{
第2列[j]=0；
}
arr2[i]=第2列；
}
控制台.工作台（arr2）；
设newarr2=[…arr2]；
newarr2[0][2]=3；
控制台表格（“更新表格”）；
console.table（newarr2）；//值已正确更新
}
打开控制台并运行此代码段
运行
更新数组的代码完全正常，问题出在
arrayBuilder
中。在您的代码中，它用
initial
值填充数组，该值只是对对象的引用。所以，数组最终填充的值本质上是相同的

我已将array builder更改为克隆每个表单元格的初始对象，因此表可以包含多个值。应用程序的其余部分在我看来很好

export default function(
    numrows = 16,
    numcols = 10,
    initial = { value: 0, color: 'wheat' },
) {
    let arr = new Array(numrows).fill().map(function() {
        return new Array(numcols).fill().map(() => {return {...initial}});
    });
    return arr;
}

请参阅相关SO问题：
更新数组的代码完全正确，问题出在
arrayBuilder
中。在您的代码中，它用
initial
值填充数组，该值只是对对象的引用。所以，数组最终填充的值本质上是相同的

我已将array builder更改为克隆每个表单元格的初始对象，因此表可以包含多个值。应用程序的其余部分在我看来很好

export default function(
    numrows = 16,
    numcols = 10,
    initial = { value: 0, color: 'wheat' },
) {
    let arr = new Array(numrows).fill().map(function() {
        return new Array(numcols).fill().map(() => {return {...initial}});
    });
    return arr;
}

请参阅相关SO问题：
谢谢您的回答和解释谢谢您的回答和解释