React - キー値で状態を更新する方法

Question

私はReactを学んでいますが、私が完全に理解していないことは、大きなデータ構造を持つときに状態を更新する最良の方法です。以下はの単純化した例がある私がやっている、私の親コンポーネントに私は子コンポーネントにダウン渡す記述を更新するために、私は、そのコンポーネントで機能を持っているので、

getInitialState: function(){ 
    return { 
     initialItems: [ 
      {"id": 1, "name": "Apples", "description": "Description"}, 
      {"id": 2, "name": "Broccoli", "description": "Description"}, 
      {"id": 3, "name": "Chicken", "description": "Description"}, 
      {"id": 4, "name": "Duck", "description": "Description"} 
     ], 
     items: [] 
    } 
}, 

のような状態に設定していますので、使用した小道具

update_description: function(id, description) { 
    var state = this.state.items.map(function(item) { 
     return { 
      id: item.id, 
      name: item.name, 
      description: (item.id === id ? description: item.description), 
     }; 
    }, this); 

    this.setState({ items: state }); 
}, 

私のレンダリング機能

render: function() { 
    return (
     <List items={this.state.items} update_description={this.update_description} /> 
    ); 
} 

で次に

そして、私の子コンポーネント

var List = React.createClass({ 
    render: function(){ 
    return (
     <ul className="no-list no-pad items"> 
     { 
     this.props.items.map(function(item) { 
      return <ListItem key={item.id} item={item} update_description={this.props.update_description} /> 
     }, this) 
     } 
     </ul> 
    ) 
    } 
}); 

これはうまくいきますが、コードがすべてのアイテムをループしていて、IDが一致するかどうかを確認していて、説明が更新されているかどうかを確認するため、非常に非効率的です（特に大きなデータ構造の場合）。また、このメソッドで、「image」のような各項目に別のプロパティを追加すると、update_description関数を更新することを忘れないでください。

理想的には、「IDが関数に渡している記述プロパティを更新する」と言っているのが理想です。 SQLのようなものです。

これは可能ですか？現時点では私はReactだけを使用していますが、私は他のライブラリやツールを使って私を助けています。

Answer 1

私の答えはキー値ではありませんが、非常に効率的です。 レンダリング機能でアイテムのインデックスを渡すだけで済みます。 idのキーを持つオブジェクトも考えました。しかし、あなたがルーピング時にあなたが望むものであるかどうかを確認することはできません。

var List = React.createClass({ 
    render: function(){ 
    return (
     <ul className="no-list no-pad items"> 
     { 
     this.props.items.map(function(item, index) { 
      return <ListItem key={item.id} item={item} index={index} update_description={this.props.update_description} /> 
     }, this) 
     } 
     </ul> 
    ) 
    } 
}); 

そしてあなたが記述を更新するためにインデックスを使用することができますupdate_descriptionするためにそれを渡します。

Answer 2

アルゴリズムレベルでは、要素の順序付けられていない配列を維持し、特定の要素の線形検索を実行しています。あなたが指摘したように、これはあまり効率的ではありません。配列を使用する代わりに、償却された一定時間の参照を可能にするハッシュテーブルを使用する必要があります。 JavaScriptでは、ES2015で導入されたオブジェクト（Map()）を使用することができ、すべてのブラウザでサポートされているわけではありません。

idをオブジェクト/マップのキーとして使用すると、update_description()関数では、そのキーに関連付けられている要素に直接アクセスできます。これらの要素はこの場合オブジェクトなので、その特定のオブジェクトのdescriptionプロパティを変更できます。リアクトを再レンダリングするには、this.setState({})に電話する必要があります。

setState()を変更可能なデータ構造で使用する方法の詳細は、setState()を参照してください。