Javascript 使用lodash推拉法收集可选复选框值

我想抛开lodash，尽可能多地使用es6，其他方面做得很好，特别是我使用了数组辅助方法，比如map和spread，真的很有帮助，但我不能重构下面的代码

onChangeCheckbox(e) {
    const { input } = this.props;

    const arr = input[ e.target.name ] || [];

    const checked = e.target.checked;
    if (checked) {
        arr.push(e.target.value);
    }
    else {
        pull(arr, e.target.value);
    }

    this.props.onChange( e.target.name, arr );
}

---

对我来说没问题，但其他成员抱怨很难阅读，有什么线索可以让它变得更好吗？

您可以过滤数组，并将结果分配回arr：

arr = arr.filter((value) => value !== e.target.value)

在react中，最好是替换，而不是变异，因为更改检测会进行肤浅的比较，所以我也会替换

数组#push

onChangeCheckbox(e) {
    const { input } = this.props;

    let arr = input[ e.target.name ] || [];

    const checked = e.target.checked;

    if (checked) {
        arr = [...arr, e.target.value];
    }
    else {
        arr = arr.filter((value) => value !== e.target.value)
    }

    this.props.onChange( e.target.name, arr );
}

---

为什么你认为

[…arr，e.target.value]

比

arr.push（e.target.value）

好？因为

push

会变异数组，而反应肤浅的比较不会捕捉到这种变化。@OriDrori我认为

arr.push（）

和

arr=[…arr，'a']

两者都将变异

arr

一个是通过分配新值，另一个是通过推送正确的值？我认为这不是问题

this.props.onChange

将使用必要的数组数据调用，因此是否进行变异并不相关。原始代码使用了变异，我认为它是有效的。@MayankShukla-

arr=[…arr，'a']

创建了一个新数组