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

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

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。

当前回答

你忘记使用setState。例子:

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

但最好使用过滤器，因为它不会改变数组。例子:

removePeople(e){
  var array = this.state.people.filter(function(item) {
    return item !== e.target.value
  });
  this.setState({
    people: array
  })
},

2016-03-31 07:27:37

其他回答

const [randomNumbers, setRandomNumbers] = useState([111,432,321]);
const numberToBeDeleted = 432;

// Filter (preferred)
let newRandomNumbers = randomNumbers.filter(number => number !== numberToBeDeleted)
setRandomNumbers(newRandomNumbers);

//Splice (alternative)
let indexOfNumberToBeDeleted = randomNumbers.indexOf(numberToBeDeleted);
let newRandomNumbers = Array.from(randomNumbers);
newRandomNumbers.splice(indexOfNumberToBeDeleted, 1);
setRandomNumbers(newRandomNumbers);


//Slice (not preferred - code complexity)
let indexOfNumberToBeDeleted = randomNumbers.indexOf(numberToBeDeleted);
let deletedNumber = randomNumbers.slice(indexOfNumberToBeDeleted, indexOfNumberToBeDeleted+1);
let newRandomNumbers = [];
for(let number of randomNumbers) {
    if(deletedNumber[0] !== number)
        newRandomNumbers.push(number);
};
setRandomNumbers(newRandomNumbers);

2021-09-26 19:22:50

过滤方法是修改数组而不触及状态的最佳方法。

它根据条件返回一个新数组。

在你的例子中，过滤器检查条件person。Id !== Id，并根据条件创建一个不包含该项的新数组。

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

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

   setPeople( newPeople);
 };

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

不明智的: 但如果没有任何id，也可以为条件使用项索引。

索引!== itemIndex

2021-06-15 12:27:18

非常简单首先定义一个值

state = {
  checked_Array: []
}

Now,

fun(index) {
  var checked = this.state.checked_Array;
  var values = checked.indexOf(index)
  checked.splice(values, 1);
  this.setState({checked_Array: checked});
  console.log(this.state.checked_Array)
}

2018-10-11 09:34:26

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

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

2022-05-17 08:29: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

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

推荐文章

最新文章

标签