如何在React State中切换数组项

Question

我试图在React中实现一个简单的过滤器功能。我有6个按钮，每个按钮都有一个值。可以选择按钮或不选择按钮。我只需要得到所有选中的值。我的想法是在单击按钮时将值写入数组。当第二次单击该按钮时，该项将从数组中删除。我尝试了一个函数，它可以获得数组和要切换的项目。它检查数组是否已经有该项。如果是，那么它使用过滤器去除它。如果不是，则使用扩展运算符创建一个包含所提供数组的值和新项的新数组。我的组件和函数是这样的:

export default class App extends Component {
constructor(props) {
super(props);
this.handleChangeCompetitor = this.handleChangeCompetitor.bind(this);
this.state = {
competitors: [],
};
}
handleChangeCompetitor(filterCompetitors) {
this.setState(state  => {
const competitors = state.competitors.includes(filterCompetitors)
? competitors.filter(i => i !== filterCompetitors)//remove items
: [ ...competitors, filterCompetitors ]; // add item
return {
competitors,
};
});
}
}

问题是它不工作，我得到这个错误:

Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

有人知道为什么它不起作用，或者这种方法是否有任何意义吗?

Answer 1

你可以这样做:

handleChangeCompetitor(filterCompetitors) {
this.setState((state) => ({
competitors: state.competitors.includes(filterCompetitors)
? state.competitors.filter((fc) => fc !== filterCompetitors)
: [...state.competitors, filterCompetitors],
}))
}