我正在使用一个外部库来构建一个任务板，我想要实现的是在单击并添加列按钮时添加一个新列。我正在努力添加列，我有新创建的列，但它没有被添加到数组中。我做错了什么，如何插入新创建的列？这是我的代码：
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],
}
});