材質 UI 復選框組件不起作用

Question

我在反應組件中使用材質 UI 復選框組件。 我無法讓基本的選中/未選中 function 工作，盡管我相信我做了並檢查了一切。 有人願意幫忙嗎？ 這是代碼：

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 state 變量是一個 object 數組，每個 object 定義一個具有唯一 id 屬性的用戶。 CheckedId state 變量是一個數組，其中僅包含那些被檢查的用戶的唯一 ID。

Answer 1

我在設置 state 時使用了錯誤的語法。 應該是this.setState({checkedId}); 而不是this.setState(checkedId); . 更正此問題解決了問題