javascript - 简单的 Ajax 请求，在 React.js 中循环数据

Question

新的 react ，而不是 100% 我应该如何处理这个相对简单的问题。我目前正在寻找从 Reddit 收集一些图像，将这些图像推回到“pImage”状态。

然后让这些图像显示在“内容”div 中。通常，我只会用 for 循环来解决这个问题，但是有没有一种特殊的方法我应该用 react 来处理它？<​​/p>

componentDidMount: function() {
      var self = this;
      $.get(this.props.source, function(result) {
        var collection = result.data.children;
        if (this.isMounted()) {
          this.setState({
            //Should I put a for loop in here? Or something else?
            pImage: collection.data.thumbnail
          });
        }
      }.bind(this));
    }

显示我当前状态的 fiddle :https://jsfiddle.net/69z2wepo/2327/

Answer 1

下面是如何在 render 方法中使用 map 函数:

var ImageCollect = React.createClass({
        getInitialState: function() {
          return {
            pImage: []
          };
        },

        componentDidMount: function() {
          var self = this;
          $.get(this.props.source, function(result) {
            var collection = result.data.children;
            if (this.isMounted()) {
              this.setState({
                pImage: collection
              });
            }
          }.bind(this));
        },

        render: function() {
          images = this.state.pImage || [];
          return (
            <div>
              Images: 
              {images.map(function(image){
                  return <img src={image.data.thumbnail}/>
              })}
            </div>
          );
        }
      });

    React.render(
    <ImageCollect source="https://www.reddit.com/r/pics/top/.json" />,
      document.getElementById('content')
    );

这是工作 fiddle :http://jsfiddle.net/2ftzw6xd/