Speicher Array von Objekten in Zustand - ReactJS

Question

Ich baue eine ReactJS Anwendung, und ich brauche auf diese Weise Daten zu speichern:

this.state = { 
    user: { 
     name: "", 
     surname: "", 
     age: "", 
     ... 
     instruments: [], 
    } 
} 

Die instruments Staat braucht mehrere Objekte zu enthalten, mit Eigenschaften name und experience. Ein Beispiel:

instruments: [ 
    { 
     name: 'Bass guitar', 
     experience: 7, 
    }, 
    { 
     name: 'Drums', 
     experience: 1, 
    } 
    ... 
] 

Ich bin neu zu reagieren, bisher habe ich in der Lage gewesen, indem Sie diese Daten in ähnlichen Anordnungen zu speichern:

musicListenChange(val){ 
     let musicListenArray = this.state.user.music_listen ? this.state.user.music_listen : []; 
     musicListenArray.push(val.value); 
     this.setState({user: {...this.state.user, music_listen: musicListenArray}}); 
    } 

Allerdings, wenn ich versuche, ein Objekt zu speichern mit der folgende Code erhalte ich einen Fehler:

saveInstrument(){ 
     // save current instruments state in array, or create an empty one 
     let array = this.state.user.instruments ? this.state.user.instruments : []; 

     // in this.state.instruments I saved a temporary copy of the selected instrument, put it in the array 
     array.push(this.state.instruments); 
     this.setState({user: {...this.state.user, instruments: array }}); 
     console.log('instrum. state: ', this.state.user.instruments); 
    } 

Fehlercode

Uncaught Error: Objects are not valid as a React child (found: object with keys {name, experience}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `EditProfile`. 

Mein EditProfile machen Teil für die Instrumente

<div className="container-tags"> 
    {this.state.user.instruments ? this.state.user.instruments.map(function (instrument, index) { 
     return <button className="btn btn-default">{instrument}</button>; 
    }) : <div></div>} 
</div> 

Jede Idee, wie man dieses Problem lösen? Dank

Answer 1

Instrument ist ein Objekt, und Sie versuchen, es zu machen, verwenden Sie den spezifischen Wert, den Sie machen will, versuchen Sie dies:

musicListenChange(val){ 
    let user = this.state.user; 
    user['music_listen'] = val.value; 
    this.setState({user: user); 
} 

saveInstrument(){ 
    let user = this.state.user; 
    user['instruments'] = user['instruments'] ? user['instruments'] : []; 
    user['instruments'].push(this.state.instruments); 
    this.setState({user: user}); 
} 

In Funktion Gebrauch machen dieses:

{this.state.user.instruments ? 
    this.state.user.instruments.map((instrument, index) => { 
     return (<button className="btn btn-default">{instrument.name}</button>) 
    }) 
:<div/> 
} 

Answer 2

Das Problem ist hier:

<div className="container-tags"> 
    {this.state.user.instruments ? this.state.user.instruments.map(function (instrument, index) { 
     return <button className="btn btn-default">{instrument}</button>; 
    }) : <div></div>} 
</div> 

Bei der Realisierung, dass instrument ein Jav ist aScript-Objekt (Sie haben angegeben, dass Ihr Array instruments Objekte mit der Struktur {name: "string", experience:"string"} enthält), die Fehlermeldung wird deutlich: Sie versuchen, ein Objekt als untergeordnetes Element des Elements <button> einzufügen, was nicht erlaubt ist, da React keine Ahnung hat, wie angezeigt werden soll ein Objekt. Wenn Sie stattdessen instrument.name oder instrument.experience verwenden (also Strings), funktioniert Ihr Code.