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

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。


当前回答

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

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

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

其他回答

要从数组中删除一个元素,只需执行以下操作:

array.splice(index, 1);

在你的情况下:

removePeople(e) {
  var array = [...this.state.people]; // make a separate copy of the array
  var index = array.indexOf(e.target.value)
  if (index !== -1) {
    array.splice(index, 1);
    this.setState({people: array});
  }
},

这是你当前的状态变量

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};
});
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);

当使用React时,你不应该直接改变状态。如果一个对象(或者数组,这也是一个对象)被改变了,你应该创建一个新的副本。

其他人建议使用Array.prototype.splice(),但该方法会使Array发生变异,因此最好不要在React中使用splice()。

最简单的使用array .prototype.filter()来创建一个新数组:

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

非常简单 首先定义一个值

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)
}