javascript - react : requesting and iterating through images in JSON

Question

我对 React 完全陌生，刚刚开始通过 Facebook 上的 React 教程进行学习。我正在尝试从 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 已经作为数据返回，因此您不需要再次执行 result.data，如果您不熟悉 jQuery $.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}即可