Question

我不认为这很难，我只是无法弄清楚最好的方法。此函数从一组复选框创建一个数组。然后我想分解数组并创建一个对象数组，因为每个对象都可以有相应的数据。如何过滤掉现有的rolesInterestedIn.roleType。

handleTypeOfWorkSelection(event) {
    const newSelection = event.target.value;
    let newSelectionArray;

    if(this.state.typeOfWork.indexOf(newSelection) > -1) {
      newSelectionArray = this.state.typeOfWork.filter(s => s !== newSelection)
    } else {
      newSelectionArray = [...this.state.typeOfWork, newSelection];
    }
    this.setState({ typeOfWork: newSelectionArray }, function() {
      this.state.typeOfWork.map((type) => {
        this.setState({
          rolesInterestedIn: this.state.rolesInterestedIn.concat([
            {
              roleType: type,
            }
          ])
        }, function() {
          console.log(this.state.rolesInterestedIn);
        });
      })
    });
  }

UDPATE

rolesInterestedIn: [
  {
    roleType: '',
    experienceYears: ''
  }
],

Answer 1

因为每次执行setState时，都会将新值与rolesInterestedIn数组中的prev值连接。仅在添加新项时添加新值，否则从状态变量typeOfWork和rolesInterestedIn中删除该对象。

试试这个：

handleTypeOfWorkSelection(event) {
    const newSelection = event.target.value;
    let newSelectionArray, rolesInterestedIn = this.state.rolesInterestedIn.slice(0);

    if(this.state.typeOfWork.indexOf(newSelection) > -1) {
        newSelectionArray = this.state.typeOfWork.filter(s => s !== newSelection);
        rolesInterestedIn = rolesInterestedIn.filter(s => s.roleType !== newSelection)
    } else {
        newSelectionArray = [...this.state.typeOfWork, newSelection];
        rolesInterestedIn = newSelectionArray.map((workType) => {
            return {
                roleType: workType,
                experienceYears: '',
            }
        });
    }
    this.setState({
         typeOfWork: newSelectionArray,
         rolesInterestedIn: rolesInterestedIn  
    });
}

建议：不要在函数中使用多个setState，执行所有计算，然后使用setState一次更新最后的所有值。

过滤掉对象数组中的现有对象

1 个答案: