Reagieren abgebildet Checkbox alle der Array-Elemente zu wiederholen zurück, anstatt nur die, die ich

Question

Visual: Form I am using on the left, outputs on the right

geprüft habe ich versuche, eine Checkbox Array Karte zu verwenden, in React Eigenschaften einer bestimmten Sache zu zeigen, aber wenn Ich drucke die Elemente aus, jedes Array-Element erscheint auf der Tabelle meiner Front-End-Webseite, nachdem ich mein Formular und meine Datenbank eingereicht habe und nicht nur die, die ich überprüft habe. Es wird alles in eine MongoDB-Datenbank zurückgemeldet, und das funktioniert gut (ich habe das geändert, indem ich geändert habe, was ich dort an eine einfache String-Eingabe sende), also bin ich überzeugt, dass das Mapping das Problem ist. Vielen Dank!

Constructor:

constructor(props) { 
    super(props); 
    this.state = { 
     name: '', 
     price: '', 
     location: ['Back Bay', 'Downtown Crossing'], 
     description: '', 
     features: [ 
      'Pet-Free', 'Climate-Controlled', 'Locked Area', 'Private Entrance', 'Smoke Detectors', 'Smoke Free' 
     ], 
    }; 

     this.onInputChange = this.onInputChange.bind(this); 

    this.addListingService = new ListingService(); 
    this.handleSubmit = this.handleSubmit.bind(this); 
} 

Und hier ist mein Mapping:

<div>What cool features does this storage space have?</div> 
    { 
    this.state.features.map((features) => { 
       return <CheckBox key={features} title={features} name="features" /> 
      }) 
       } 

Edit:

Ich habe auch versucht eine onInputChange() Funktion zu verwenden, um zu sehen, ob es das auslösen würde, so nur die Checkbox-Optionen, die ich überprüft habe, würden auf meiner Frontend-Seite und meiner Datenbank erscheinen, aber das schien nicht zu helfen. Ich habe ein Foto beigefügt, das die Form, die ich verwende, und die Ausgaben zeigt. Hier ist die Funktion:

 onInputChange(event) { 
     const target = event.target; 
     const value = target.type === 'checkbox' ? target.checked : target.value; 
     const name = target.name; 

     this.setState({ 
      [name]: value, 
     }); 
    } 

Edit 2:

ich jetzt versuchen, Keymapping wie unten vorgeschlagen, aber ich erhalte eine Fehlermeldung mit der ObjectKeys Funktion. Der Fehler Ich erhalte sagt „Typeerror:. Object.assign (...) Filter ist keine Funktion“

Object.keys(this.state.features).map(key =>({...this.state.features[key],title:key} 
            .filter(features=>features.checked) 
            .map(features => <CheckBox key={features} title={features} onChange = {this.onInputChange} />))) 

Answer 1

Wenn Sie nur bestimmte Elemente eines Arrays zeigen wollen, können Sie Array.prototype.filter verwenden

this.state.features 
    .filter(features=>features.checked) 
    .map(feature => <CheckBox key={feature.id} title={feature.title} name="features" />) 

Dadurch werden nur Kontrollkästchen für die von Ihnen geprüften Elemente angezeigt. Wenn Sie true zum Filtern zurückgeben, wird das Element beibehalten, false nicht. Hinweis: Dadurch wird das ursprüngliche Array nicht geändert. Meine Methode erfordert jedoch, dass Sie Ihre Daten leicht umstrukturieren. Vielleicht möchten Sie eine Reihe von Funktionen, die wie folgt aussieht

[ 
    {id:1,title:'Pet-Free',checked:true}, 
    {id:2,title:'Climate-Controlled',checked:false}, 
    // ...etc 
]