Herausfiltern von bestehenden Objekten in einem Array von Objekten

Question

Ich denke nicht, dass das schwierig ist, ich kann einfach nicht den besten Weg finden, es zu tun. Diese Funktion erstellt ein Array aus einer Gruppe von Kontrollkästchen. Ich möchte dann das Array aufteilen und ein Array von Objekten erstellen, da jedes Objekt entsprechende Daten haben kann. Wie filtere ich bestehende rolesInterestedIn.roleType heraus.

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

Weil jedes Mal, wenn Sie setState tun Sie den neuen Wert in der einen i.Vj. verketten sind in rolesInterestedIn Array. Fügen Sie nur einen neuen Wert hinzu, wenn Sie ein neues Element hinzufügen, andernfalls entfernen Sie das Objekt aus der Statusvariablen typeOfWork und rolesInteressedIn.

Try this:

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

Vorschlag: nicht mehr setState innerhalb einer Funktion verwenden Sie, alles tun, die Berechnung dann setState einmal verwenden, um alle Werte in den letzten zu aktualisieren.