更新プロパティオブジェクト

Question

私の状態のArrayオブジェクトが オブジェクトの名前、私はので、私は親コンポーネントに私の状態オブジェクトで、のようなもの持っている：

object:[{id:1, name:"name"},{id:2, name:"name2"}]; 

を私は選択ボックスを持っています

var elements = this.state.object.map(function(element, k){ 
     return (

     <Components object={this.state.object} element={element} setPropertyElement={this.setPropertyElement} />   

     ) 
     }, this); 

：子コンポーネントにアレイ内のすべてのオブジェクトと選択のためのような小道具で渡さthis.props.object.mapが印刷されていますしたがって、この場合には、私は私のページに変更名を選択し、関連を持つ2つの要素を参照してください

<select className="form-control" ref="name" defaultValue="j" onChange={this.change}> 
    <option value="j">j</option> 
    <option value="x">x</option> 
</select> 

：3210は

子コンポーネントでは、私は次のように変更機能を備えた選択があります。 私はの機能変更を持っています。私の親要素で

change(event){ 
    this.props.setPropertyElement(this.props.element, event.target.value); 
} 

私は機能setPropertyElement持っているので：

setPropertyElement(element, value){ 

     element.name = value; 
    } 

を私の質問は： 私の操作が正しいか、私は間違った方法状態オブジェクトに・修正していますか？ この場合どのようにして配列のプロパティオブジェクトの値を正しく変更できますか？

Answer 1

あなたは正しい方向にあります。すでに述べたように、状態を変更するには、setState（{}）を呼び出します。ここでは、更新する要素を指定する必要があります。あなたがspread operatorを使用する場合は、このケースでは、このようになります。

this.setState({object: [ 
    ...this.state.object.filter(x => element.ID !== x.ID), 
    { id: element.id, name: element.name } 
]}) 

Answer 2

これを試してみてください：

let editableComparatorIndexes = [...this.state.ids]; 
    editableComparatorIndexes[i] = 1; 
    this.setState({editableComparatorIndexes});