復選框的值已添加到數組，但未選中該復選框

Question

我已經選中了兩個復選框。 我可以取消選中它們，但是我不能再次選中它們。 如果未選中復選框，則將值從peopleChecked數組中刪除，當他們想要標記該值時，將其添加到數組peopleChecked ，但未選中復選框

代碼在這里 ：

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
    });
  };