javascript - React - 多个取消选择时复选框不会更新

Question

当我单击 + 按钮展开组并单击组 1 的复选框时，它按预期执行。

但问题是，
如果我先单击组 1 的复选框，然后通过单击 + 按钮展开组，
它会显示所有用户单击的正确，如果我再次单击组 1
的复选框，则组 1 的复选框变为未选中，但不会取消选中用户的复选框。

重现步骤：刷新页面>单击组1复选框>单击+展开>再次单击组1复选框>然后您将看到用户复选框不会被取消选中

沙盒链接如下：
https ://codesandbox.io/s/dazzling-antonelli-gl9rm

在取消选择组 1 后，用户的 2 个复选框不会被取消选中：

标签： javascriptreactjs

Answer 1

您的isExist方法返回undefined而不是false，将其修复为始终返回true/ false。

isExist = (id, group) => {
    if (!this.props.selected) {
      console.log("selected = null");
      return false;
    }

    return (
      this.props.selected.find((ele) => ele.id === group + id) !== undefined
    );
  };

这样您就不必手动将其返回值转换为booleanusing !!。

我建议也将您的handleSelected方法重构为

handleSelected = async (e) => {
  const { selected } = this.state;

  if (e.target.checked) {
    let temp = { id: e.target.id, name: e.target.name };
    return this.setState({ selected: [...selected, temp] });
  }

  this.setState({
    selected: selected.filter(({ id }) => id !== e.target.id)
  });
};