Bir newsfeed öğesindeki her öğe için sayacı arttırma

Question

Farklı besleme öğeleri için özelliklere sahip bir nesneler dizisi üzerinden dolaşan ve Facebook benzeri bir yayın oluşturan bir görünüm hazırladım. Her öğede, bir sayıyla "beğen" düğmesi vardır.

Bu öğenin sayımı için sayımı artırabilmek isterim. Sorun şu ki, tek bir öğeye (dizide) erişmek ve incrementLikes yönteminin yalnızca öğenin benzer sayımını (yalnızca istemci tarafındaki görünümde) sunucu tarafında nasıl erişileceğini bilmem. entegrasyon daha sonra gerçekleşecek).

Kodu:

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

ItemList ben şu anda başka bir bileşen yerine HTML iade ediyorum. Bu sorunun kaynağı olduğunu hissediyorum, ancak ItemNodes oluşturduğu bileşenlerin ataları arasında veri paylaşabilirsiniz Bileşen ile .map() çağırma yerine nasıl bir kaybı biraz. Tıklama sever meydana geldiğinde

Answer 1

item.id gibi sen item için tanımlayıcı bir tür olduğunu varsayarsak, item.id geçen aracılığıyla bunu başarabilirsiniz:

:

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

Yoksa ok işlevleri varsa

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

Daha sonra hafifçe bir nesneye bir diziden eyalet temsilini (değiştirebilecek

:

getInitialState: function() { 
    return {likes: {}}; 
}, 

Ve sonra mağaza item.id karşı devlet sever:

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