Question

我准备了一个视图，循环遍历具有不同Feed项属性的对象数组，呈现类似Facebook的Feed。在每个项目中，都有一个带“计数”的“喜欢”按钮。

我希望能够增加该项目的计数，就像计数一样。问题是我似乎无法知道如何访问单个项目（在数组中）的状态，并且只有incrementLikes方法增加该项目就像count一样（仅在客户端视图上）现在;服务器端集成将在稍后发生。）

代码：

  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我正在返回HTML而不是另一个组件。我觉得这是问题的根源，但在如何用可以在其祖先之间共享数据的Componentry替换生成.map()的{{1}}调用方面有点不知所措。

Answer 1

假设您有item的某种标识符，例如item.id，您可以通过在喜欢点击时传递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>

然后，您可以稍微更改您的状态表示（从数组到对象：

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

然后根据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});
},

增加新闻源中每个项目的计数器

1 个答案: