Question

我是React的新手，刚刚开始学习Facebook上的React Tutorial。我正试图从JSON文件中获取图像并重复它们（如Angular的ng-repeat）作为帖子，就像Instagram一样。我最初有一个工作评论部分，但现在它破了，因为我开始添加更多代码，我认为会修复它。它变得如此草率我不知道该怎么做了。

所以从我读到的内容来看，我应该通过'componentDidMount'发出GET请求。我看到使用$ getJSON，$ .ajax，$ .get的源代码，我对使用它以及如何处理它感到困惑。

let PostImage = React.createClass({
  getInitialState: function() {
    return {
      postImage: []
    };
  },

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

  render: function() {
    images = this.state.postImage || [];
    return (
      <div>
        Images: {images.map(function(image){
          return <img src={image}/>
        })}
      </div>
    );
  }
});
React.render(
  <PostImage source="https://codesmith-precourse.firebaseio.com/instagram/-JqL35o8u6t3dTQaFXSV.json" />,
  document.getElementById('content')
);

我的React.render目前在PostImage上，但最高级别的组件是InstagramPost（参见下面的Plnker）。我尝试将它切换到InstagramPost，但它破了，所以我也很困惑。在我的控制台中，我也看到了

$ is not defined

我附上了一个Plnker供参考：http://plnkr.co/edit/AYxUjameK6dAqCYUiwQT?p=info

如果您也可以帮助我的评论部分发挥作用，那也会很棒。提前谢谢。

编辑：忘了在Plnker中包含jQuery。

Answer 1

首先，您使用的是jQuery $.get，因此您必须包含jQuery脚本

 <script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="   crossorigin="anonymous"></script>

jQuery $.get已作为数据返回，因此如果您不熟悉jQuery，则不需要再次执行result.data $.get阅读here

你的最终componentDidMount应如下所示

componentDidMount: function() {
  var self = this;
  $.get(this.props.source, function(result) {
    var collection = result;
    this.setState({
      postImage: collection
    });
  }.bind(this));
},

对于CommentBox，只需在

中传递data = {data}

React：请求并迭代JSON中的图像

1 个答案: