在反应状态下分配给嵌套数组答案

【问题标题】：assign to nested array in react state在反应状态下分配给嵌套数组
【发布时间】：2020-03-15 14:33:29
【问题描述】：

嗨，我尝试在 React 中做基本的 TODO 应用程序。我在 App.js 中有我的状态

state = {
   newBoxName: '',

   boardCollection: [
     {
       id: new Date().getTime(),
       title: 'testOne',
       Boxes: []
     }
   ]
 };

点击后，我在 App.js 中的 boardCollection 中将新板创建为新对象

setNewBoard = e => {
    if (e.keyCode === 13) {
      this.setState(prev => ({
        boardCollection: [
          ...prev.boardCollection,

          { id: new Date().getTime(), title: "some user input",  Boxes: [] }
        ]
      }));

    }
  };

现在我想创建新盒子并将其保存在盒子中（对于每个板不同的盒子）作为新对象。我试图寻找答案，但我找不到解决方案。我也试试：

onSubmitAddBox() {
    this.setState({
      boardCollection: {
        ...this.state.boardCollection,
        Boxes: {
          ...this.state.boardCollection.Boxes,
          title: this.state.newBoxName
        }
      }
    });

但它会抛出错误。未定义。

【问题讨论】：

标签： javascript arrays reactjs

【解决方案1】：

我设法通过创建 state.boardCollection 的副本并通过 boardCollection 映射来解决此问题，然后检查映射元素的 id 是否与我单击的元素的 id 相同，然后更改 boardCollection 的副本并将其设置为状态。

onSubmitAddBox = id => {
    this.state.boardCollection.map((elem, index) => {

      let boardCollection = { ...this.state.boardCollection };

      if (elem.id === id) {
        boardCollection[index].Boxes = [
          ...boardCollection[index].Boxes,
          { name: this.state.newBoxName }
        ];
        console.table(this.state.boardCollection);
        this.setState([boardCollection]);
        this.setState({ newBoxName: '' });
      }
    });
  };

【讨论】：