javascript - 如何使用 setState 将新列推入数组

我正在使用一个外部库来构建一个任务板,我想要实现的是在单击并添加列按钮时添加一个新列。我正在努力添加列,我有新创建的列,但它没有被添加到数组中。我做错了什么,如何插入新创建的列?这是我的代码:

onAddColumn = () => {
    const newColumn: TaskBoardColumnModel = {
      id: this.state.columnsData.length + 1,
      title: 'New Column',
      status: 'new',
      edit: true,
    };

    console.log(this.state.columnsData);

    this.setState({
      columsData: newColumn,
    });
    console.log(this.state.columsData);
  };
}

回答1

您的主要问题是您更新状态的方式。这就是你所拥有的:

this.setState({
      columsData: newColumn,
    });

这段代码会将状态设置为 columsData: newColumn,这是错误的,原因如下:

  • 列数据应该是列数据
  • 您的一段代码将删除所有其他列并仅将其替换为一个。这将使代码失败,因为 columnsData 将成为一个对象而不是一个数组

应该是这样的:

this.setState({
      columnsData: [...this.state.columnsData, newColumn],
    });

这将保持您当前的状态,并将新列添加到您现有的列表中。

回答2

您在 columsData 中有错字。此外, columnsData 应该是一个数组,因此您可能需要将新状态设置为旧状态加上新列。

例如就像是:

this.setState({
    columnsData: [...this.state.columnsData, newColumn],
});

回答3

this.setState({

if(this.state.columnsData && this.state.columnsData.length>0)
{
    columnsData: [...this.state.columnsData, newColumn],
}
});

相似文章

python - Python - 在多行和多列中比较 values

我是Python的新手,我有一个如下所示的数据框(请参阅原始数据table)。最终目标是协调来自2个系统(sys1与sys2,在“源”列中标记)的记录(即id、rg、prd和数量)。我如何使用1个函数...