简单 Ajax 请求，循环遍历 React.js 中的数据

Question

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

然后让这些图像显示在 'content' div 中。通常，我会用 for 循环来解决这个问题，但是有没有一种特殊的方法我应该用 react 来处理它？

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/

简单 Ajax 请求，循环遍历 React.js 中的数据

Simple Ajax request, that loops over data in React.js

javascript

reactjs