保存配列 - ReactJS

Question

私はReactJSアプリケーションを構築しています、と私は、このようにデータを保存する必要があります。

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

instruments状態は性質nameとexperienceで、複数のオブジェクトを含める必要があります。例：私は反応するように新たなんだ

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

は、これまでのところ、私はこれを行うことにより、同様の配列内のデータを保存することができました：

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

しかし、私は持つオブジェクトを保存しようとすると、私はエラーを受け取り、次のコード：

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

エラーコード

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`. 

マイEditProfile楽器

<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> 

のためにこれを解決する方法上の任意のアイデアを一部をレンダリング？おかげ

Answer 1

インストゥルメントがオブジェクトであり、あなたはそれをレンダリングしようとしている、あなたがレンダリングしたい特定の値を使用し、これを試してみてください：

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

Answer 2

：

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

では、機能の使用このレンダリング

問題はここにある：

<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> 

instrumentがJAVであることを実現する場合aScriptオブジェクト（instrumentsの配列に構造体{name: "string", experience:"string"}のオブジェクトが含まれていると言った場合）、エラーメッセージはクリアされます。<button>要素の子としてオブジェクトを挿入しようとしていますが、Reactは表示方法がわからないためオブジェクト。代わりにinstrument.nameまたはinstrument.experience（文字列）を使用した場合、コードは機能します。