从 state 中删除特定项目

Question

我想在点击时从 state 中删除一个数组项，但我无法让它工作。 我的 state 如下所示，我想在单击时删除其中一个数据集（例如 label 2）。

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

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

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

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

Answer 1

几件事：

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

然后，您可以将该新数组设置为 state: this.setState({ datasets: newData })中的datasets数组的替换。

如果你想写一个 function 来动态地做到这一点，我会写一个带索引并直接编辑数据数组的：

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