如何从状态数组中删除一个项目?

故事是这样的，我应该可以把鲍勃，莎莉和杰克放进一个盒子里。我也可以把它们从盒子里拿出来。拆卸时，没有插槽留下。

people = ["Bob", "Sally", "Jack"]

现在我需要删除，比如说，“Bob”。新的数组将是:

["Sally", "Jack"]

下面是我的react组件:

...

getInitialState: function() {
  return{
    people: [],
  }
},

selectPeople(e){
  this.setState({people: this.state.people.concat([e.target.value])})
},

removePeople(e){
  var array = this.state.people;
  var index = array.indexOf(e.target.value); // Let's say it's Bob.
  delete array[index];
},

...

这里我向你展示了一个最小的代码，因为有更多的它(onClick等)。关键部分是从数组中删除，删除，销毁“Bob”，但removePeople()在调用时不工作。什么好主意吗?我正在看这个，但我可能做错了，因为我使用React。

当前回答

只需过滤掉已删除的项，并再次用剩余的项更新状态，

let remainingItems = allItems.filter((item) => {return item.id !== item_id});
    
setItems(remainingItems);

2022-05-17 08:29:31

其他回答

const [people, setPeople] = useState(data);

const handleRemove = (id) => {
   const newPeople = people.filter((person) => { person.id !== id;
     setPeople( newPeople );
     
   });
 };

<button onClick={() => handleRemove(id)}>Remove</button>

2020-12-15 05:31:53

removePeople(e){
    var array = this.state.people;
    var index = array.indexOf(e.target.value); // Let's say it's Bob.
    array.splice(index,1);
}

Redfer doc获取更多信息

2016-03-31 07:27:31

这里几乎所有的答案似乎都是类组件，这里有一个代码，在一个功能组件中为我工作。

const [arr,setArr]=useState([]);
const removeElement=(id)=>{
    var index = arr.indexOf(id)
    if(index!==-1){
      setArr(oldArray=>oldArray.splice(index, 1));
    }
}

2021-04-06 09:23:33

这是你当前的状态变量

const [animals, setAnimals] = useState(["dogs", "cats", ...])

调用此函数并传递要删除的项。

removeItem("dogs")

const removeItem = (item) => {
    setAnimals((prevState) =>
      prevState.filter((prevItem) => prevItem !== item)
    );
  };

你的状态函数现在变成:

["cats", ...]

另一种方法是使用useState钩子。检查文档:https://reactjs.org/docs/hooks-reference.html#functional-updates它声明:与类组件中的setState方法不同，useState不会自动合并更新对象。您可以通过将函数更新器表单与对象扩展语法组合来复制此行为，如下所示，或者使用useReducer钩子。

const [state, setState] = useState({});
setState(prevState => {
  return {...prevState, ...updatedValues};
});

2022-02-19 16:06:57

这里是亚历山大彼得罗夫使用ES6的回应的一个小变化

removePeople(e) {
    let filteredArray = this.state.people.filter(item => item !== e.target.value)
    this.setState({people: filteredArray});
}

2016-12-25 23:47:36

如何从状态数组中删除一个项目?

推荐文章

最新文章

标签