材质 UI 复选框组件不起作用

Question

我在反应组件中使用材质 UI 复选框组件。尽管我相信我做了并检查了所有内容，但我无法使基本的检查/未检查功能正常工作。有人愿意帮忙吗？这是代码：

class SplitEqually extends React.Component {
  constructor(props) {
    super(props);
    let checked = this.props.contributors.map((contributor) => contributor.id)
    this.state = {
      checkedContributors: this.props.contributors,
      checkedId: checked,
    };
  }
  handleChange = (e, contri) => {
    let checkedId = this.state.checkedId.includes(contri.id)
      ? this.state.checkedId.filter((id) => id !== contri.id)
      : [...this.state.checkedId, contri.id];
     console.log(checkedId)
    let checkedContributors = this.state.checkedContributors.filter((contri) =>
      checkedId.includes(contri.id)
    );
    this.setState(checkedId);
  };

  render() {
    const { classes, contributors } = this.props;
    const { checkedContributors, checkedId } = this.state;
    return (
      <div className={classes.splitUnequally}>
        {contributors.map((contributor, i) => {
          let { id, name } = contributor;
          console.log(checkedId.includes(id));
          return (
            <div className={classes.list} key={id}>
              <div className={classes.avatar}></div>
              <FormControlLabel
                labelPlacement="start"
                control={
                  <Checkbox
                    onChange={(e) => this.handleChange(e, contributor)}
                    name={name}
                    checked={checkedId.includes(id)}
                  />
                }
                label={name}
              />
            </div>
          );
        })}
        <br></br>
      </div>
    );
  }
}

checkedContributors 状态变量是一个对象数组，每个对象定义一个具有唯一 id 属性的用户。 CheckedId 状态变量是一个数组，其中仅包含那些被检查的用户的唯一 id。

Answer 1

我在设置状态时使用了错误的语法。它应该是this.setState({checkedId}); 而不是this.setState(checkedId);。更正此问题解决了问题