ニュースフィード内の各アイテムのカウンタを増やす

Question

Facebookフィードのように、さまざまなフィードアイテムのプロパティを持つオブジェクトの配列を循環するビューを用意しました。各項目には、「好き」のボタンがあります。

私は、そのアイテムのようなカウントのカウントを増やすことができるようにしたいと思います。問題は、（配列内の）個々のアイテムにアクセスする方法を知ることができず、incrementLikesメソッドがそのアイテムのようなカウントだけインクリメントさせるようには思えないということです。統合は後で起こる）。

コード：ItemListで

var ItemList = React.createClass({ 
    render: function() { 
     var itemNodes = this.props.data.reverse().map(function(item) { 
     return (
      <div key={item.uuid} className="feedItem"> 
      <a href={item.clickUrl}><img src={item.thumbnail} className="thumbnail" /></a> 
      <div className="title"> 
       <a href={item.clickUrl}><h2>{item.title}</h2></a> 
      </div> 
      <div className="subtitle"> 
       <a href={item.clickUrl}><h3>{item.subtitle}</h3></a> 
      </div> 
      <div className="meta"> 
       <div className="likes"> 
       Likes: <span onClick={this.props.onClickEvent}>{item.likeCount}</span> 
       </div> 
      </div> 
      </div> 
     ); 
     }); 
     return (
     <div className="itemList"> 
      {itemNodes} 
     </div> 
     ); 
    } 
    }); 
    var Feed = React.createClass({ 
    loadItemsFromServer: function() { 
     $.ajax({ 
     url: this.props.url, 
     dataType: 'json', 
     cache: false, 
     success: function(data) { 
      this.setState({data: data.contentFeed.items}); 
     }.bind(this), 
     error: function(xhr, status, err) { 
      console.error(this.props.url, status, err.toString()); 
     }.bind(this) 
     }); 
    }, 
    getInitialState: function() { 
     return {data: []}; 
    }, 
    componentDidMount: function() { 
     this.loadItemsFromServer(); 
     setInterval(this.loadItemsFromServer, this.props.pollInterval); 
    }, 
    incrementLikes: function(event) { 
     var tempState = {}; 
     tempState.data.likeCount = this.state.data.likeCount + 1; 
     this.setState({data: tempState}); 
    }, 
    render: function() { 
     return (
     <div className="feed"> 
      <ItemList data={this.state.data} onClickEvent={this.incrementLikes} /> 
     </div> 
    ); 
    } 
    }); 
    ReactDOM.render(
    <Feed url="content.json" pollInterval={5000} />, 
    document.getElementById('react-content') 
    ); 

私は現在、代わりに別のコンポーネントのHTMLを返しています。私はこれが問題の原因だと感じていますが、.map()呼び出しを置き換えて、祖先全体でデータを共有できるComponentryでItemNodesを生成する呼び出しを置き換える方法が少し失われています。クリックが好きで発生したときに

Answer 1

item.idのように、あなたがitemための識別子のいくつかの種類を持っていると仮定すると、あなたはitem.idを渡して、これを達成することができます：

：

<div className="likes"> 
    Likes: <span onClick={function() { this.props.onClickEvent(item.id)}.bind(this)}>{item.likeCount}</span> 
</div> 

それとも、矢印の機能を持っている場合

<div className="likes"> 
    Likes: <span onClick={() => this.props.onClickEvent(item.id)}>{item.likeCount}</span> 
</div> 

あなたはその後、少しの配列からオブジェクトに（あなたの状態の表現を変更することができます：

を

そして店はitem.idに対して状態で好き：

incrementLikes: function(itemId) { 
    this.state.likes[itemId] = this.state.likes[itemId] ? this.state.likes[itemId] + 1 : 1; 
    this.setState({likes:this.state.likes}); 
},