オブジェクトの配列内の既存のオブジェクトをフィルタリングします。

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配列の前の1に新しい値を連結しているため。新しい項目を追加する場合にのみ新しい値を追加します。そうでない場合は、状態変数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を使用するすべての計算をしないでください。