从状态中删除特定项目

Question

我只想在单击时从状态中删除一个数组项，但我无法使其正常工作。我的状态如下所示，我想在点击时删除其中一个数据集（例如标签 2）。

state = {
  data: {
    labels: time,
    datasets:[
      {
       "label": "Label 1",
      },
      {
       "label": "Label 2",
      },
      {
       "label": "Label 3",
      },
    ] 
  }
}

实际的数据集要大很多，我通常会使用 setState 重新定义状态，但这并不实用，因为数据量很大。有没有办法我可以删除这个数组项？我已经尝试创建一个函数来删除另一篇文章中建议的项目，但我只能让它为顶级键工作。

removekey = (keyname) => {
        let newState = this.state;
        delete newState[keyname];
        this.setState(newState)
}

this.removekey('data.datasets[1]');

Answer 1

几件事：

当您声明newState 时，您实际上并没有阻止直接的状态突变，因为简单地声明一个新变量会创建一个对状态对象的引用，而不是一个全新的引用。试试Array.from(this.state.datasets)。

然后您可以将该新数组设置为您所在州的 datasets 数组的替换： this.setState({ datasets: newData }).

如果你想编写一个函数来动态执行此操作，我会编写一个带索引并直接编辑数据数组的函数：

removeItem = (index) => {
        let newData = Array.from(this.state.datasets);
        newData.splice(index, 1);
        this.setState({ datasets: newData })
}