javascript - 带有 React JS 的组件 "loop"

Question

我正在研究 React JS 库，我希望创建一个组件的“循环”，从 json 文件返回数组值。这是我的 json 文件:

{
  "data": {
    "children": [{
      "data": {
        "score": 4
      },
      {
        "data": {
          "score": 2
        }
      }
    }]
  }
}

我的 react 组件:

var ImagesList = React.createClass({
    render: function() {
      var imagesNodes = this.props.data.map(function (image){
        return (
          <div className="card">
              <p>{image.score} </p>
          </div>
        );
      });

      return (
        <div className="images">
          {imagesNodes}
        </div>
      );
    }
  });

var ImageBox = React.createClass({
    getInitialState: function(){
      return {
        data: {children:[]}
      };
    },

    getImages: function(){
      $.ajax({
        url: this.props.url,
        dataType: 'json',
        success: function(data){
          this.setState({data: data});
        }.bind(this),
        error: function(xhr, status, err){
          console.error(url, status, err.toString());
        }.bind(this)
      });
    },

  componentWillMount: function(){
      this.getImages();
  },

  render: function() {
    return (
      <div className="list-images">
          {<ImagesList data={this.state.data.children}/>}
      </div>
    );
  }
});

  React.render(
    <ImageBox url="myfile.json" />,
    document.getElementById('test')
  );

当我运行代码时，返回此错误:

Uncaught TypeError: Cannot read property 'map' of undefined.

我不知道如何解决这个问题。

Answer 1

JSON 输入数据似乎无效。已在 JSONParser 上验证

ImageList 组件需要 data 对象内的 children JSON 数组。因此，如果 AJAX 调用返回 JSON，组件将能够呈现该数据

{
  "children": [
    {
      "score": 4
    },
    {
      "score": 2
    }
  ]
};

请注意 this.setState({data: data}); 已经有 data 变量。因此响应不应再次设置data，否则它会变成data.data.children。这就是代码抛出 Uncaught TypeError: Cannot read property 'map' of undefined.

的原因。

在完成 ReactJS 学习后，为了进一步阅读，我建议查看 Flux Architecture ，这是实现 ReactJS 应用程序的推荐方法