如何从React状态数组中删除未选中的复选框？

Question

当复选框的onChange事件发生时，如何在React中从状态数组中删除未选中的值？

状态数组：

this.state = { value: [] }

onChange函数：

handleChange = event => {
    if (event.target.checked) {
        this.setState({
            value: [...this.state.value, event.target.value]
        });
    } else {
        this.setState({
            value: [this.state.value.filter(element => element !== event.target.value)]
        });
    }
};

不确定 .filter() 应该做什么。

- js-learner

Answer 1

除了以下两点，你非常接近：

1. 需要移除在调用 filter 时的方括号 []。 filter 返回一个数组。如果你将其包裹在另一个数组中，这意味着你将该数组放入另一个数组中，而这不是你想要的（在这种情况下）。

   以及

2. 由于你基于现有状态更新状态，所以使用回调版本的 setState 非常重要，而不是直接接受对象的版本。状态更新可以批处理在一起，因此你需要确保你正在处理最新版本的数组。

所以：

handleChange = ({target: {checked, value: checkValue}}) => {
//             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//                 ^− destructuring to take the properties from the event,
//                    since the event object will get reused and we're doing
//                    something asynchronous below
    if (checked) {
        this.setState(({value}) => ({value: [...value, checkValue]}));
    } else {
        this.setState(({value}) => ({value: value.filter(e => e !== checkValue)}));
        //                                  ^−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^−−− No [] around  this
    }
};

有些情况下，你可以仅使用this.state.value而不使用回调函数（例如，如果你只在某些事件的响应中更新value），但你必须确定自己知道这些情况是哪些；最简单的方法就是使用回调函数。

---

顺带一提，由于它具有多个值，如果是我，我会将状态属性称为values（复数）而不是value，这也意味着我们不必在上述解构中重命名来自事件目标的value：

handleChange = ({target: {checked, value}}) => {
    if (checked) {
        this.setState(({values}) => ({values: [...values, value]}));
    } else {
        this.setState(({values}) => ({values: values.filter(e => e !== value)}));
    }
};

- T.J. Crowder

---

嘿 @T.J. Crowder，谢谢你的回答 :) 你觉得元素 !== 事件目标值也可以吗？ - js-learner

@js-learner - 是的，因为你直接存储了复选框的值，所以你是在进行一对一的比较。请注意更新，还有一件你可能想要在上面做的事情。 - T.J. Crowder

啊，太棒了，完全明白了，非常感谢你！ - js-learner

@DennisVash 谢谢你的建议，这也是一个很好的方法！ - js-learner

@DennisVash - 在原始帖子中，它是value，这与第一个代码块相关；只有在最后一个代码块中的values建议更改状态属性的名称。 - T.J. Crowder