Question

嗨，我尝试在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: [] }
        ]
      }));

    }
  };

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

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

但是它抛出错误。没有找到。

Answer 1

我设法通过创建state.boardCollection的副本并映射boardCollection来解决此问题，然后检查maping元素的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: '' });
      }
    });
  };

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

1 个答案: