javascript - 复选框的值已添加到数组中，但复选框未选中

Question

我选中了两个复选框。我可以取消选中它们，但无法再次检查它们。当取消选中复选框时，该值会从数组 peopleChecked 中删除，当想要标记时，该值会添加到数组 peopleChecked 中，但复选框不会被选中

代码here :

class App extends Component {
  constructor() {
    super();
    this.state = {
      people: [
        {
          firstname: "Paul",
          userCompetences: [
            {
              asset: {
                id: "12345"
              }
            }
          ]
        },
        {
          firstname: "Victor",
          userCompetences: [
            {
              asset: {
                id: "5646535"
              }
            }
          ]
        },
        {
          firstname: "Martin",
          userCompetences: [
            {
              asset: {
                id: "097867575675"
              }
            }
          ]
        },
        {
          firstname: "Gregor",
          userCompetences: [
            {
              asset: {
                id: "67890"
              }
            }
          ]
        }
      ],
      peopleChecked: [
        {
          amount: 0, 
          asset: {
            id: "fgfgfgfg",
            name: 'Gregor'
          },
          asset_id: '67890'
        },
        {
          amount: 0,
          asset: {
            id: "dsdsdsd"
          },
          asset_id: '12345'
        },
      ],
      selectPeopleId: []
    }
  }

  handleSelect = (person) => {
    //Check if clicked checkbox is already selected
    var found = this.state.peopleChecked.find((element) => {
      return element.asset_id === person.userCompetences[0]['asset']['id'];
    });

    console.log(found);

    if(found){
      //If clicked checkbox already selected then remove that from peopleChecked array
      this.setState({
        peopleChecked: this.state.peopleChecked.filter(element => element.asset_id !== person.userCompetences[0]['asset']['id']),
        selectPeopleId: this.state.selectPeopleId.filter(element => element !== person.userCompetences[0]['asset']['id'])
      }, () => console.log(this.state.peopleChecked))
    }else{
      //If clicked checkbox is not already selected then add that in peopleChecked array
      this.setState({
        selectPeopleId: [...this.state.selectPeopleId,  person.userCompetences[0]['asset']['id']],
        peopleChecked: [...this.state.peopleChecked,  person]
      }, () => {console.log(this.state.selectPeopleId)})
    }
  }


  render() {
    return (
      <div>
        {this.state.people.map(person => (
          <div key={person.firstname} className="mb-1">
            <input
              type={'checkbox'}
              id={person.id}
              label={person.firstname}
              checked={
                this.state.peopleChecked.some(
                  ({ asset_id }) => asset_id === person.userCompetences[0]['asset']['id']
              )}
              onChange={() => this.handleSelect(person)}
            /> {person.firstname}
          </div>
        ))}
      </div>
    );
  }
}

Answer 1

您可以稍微简化您的handleSelect逻辑。尝试将其分解，以便您可以使用一系列字符串。这就是您切换复选框所需的全部内容:

查看带有工作代码的沙箱:https://stackblitz.com/edit/react-xsqhwt?file=index.js

  handleSelect = person => {
    const { peopleChecked } = this.state;
    let peopleCheckedClone = JSON.parse(JSON.stringify(peopleChecked));

    const personId = person.userCompetences[0].asset.id;

    const removeIndex = peopleChecked.findIndex(
      person => person.asset_id === personId
    );

    if (removeIndex >= 0) {
      peopleCheckedClone.splice(removeIndex, 1);
    } else {
      peopleCheckedClone = [...peopleCheckedClone, { asset_id: personId }];
    }

    this.setState({
      peopleChecked: peopleCheckedClone
    });
  };