从 state 中删除特定项目

Question

I want to remove just one array item from state on click but im having troubles getting this to work. My state looks like this below, and i want to remove one of the datasets on click (for example label 2).

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

The actual dataset is A LOT larger and I would usually just redefine the state using setState, but this isnt practical because of the huge data. Is there a way I can just remove this one array item? I've tried creating a function to remove the item as suggested on another post but i can only get it to work for top level keys.

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

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

Answer 1

A couple things:

When you declare newState , you're not actually preventing direct state mutation because simply declaring a new variable creates a reference to the state object, not an entirely new one. Try Array.from(this.state.datasets) .

You can then set that new array as a replacement for the datasets array in your state: this.setState({ datasets: newData }) .

If you want to write a function to do this dynamically, I would write one that takes an index and edits the data array directly:

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