Question

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

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

我的反应成分：

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')
  );

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

未捕获的TypeError：无法读取未定义的属性“map”。

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

Answer 1

JSON输入数据似乎无效。在JSONParser

上验证了它

ImageList组件期望children对象中的data 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应用程序的推荐方法

Answer 2

让我们调试您的代码。在您的代码的ajax回调函数中。获取json数据返回，并使用返回数据设置状态数据。所以this.state.data将是：

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

在渲染方法中，您尝试将Image从ImageBox插入到ImageList中

data = { this.state.data.children }

但this.state.data.children未定义。 this.state.data中没有名为children的键。你可以做到

 {<ImagesList data={this.state.data.data.children}/>}

NB。不要忘记验证JSON值，如上面的评论所述并将其解析为Json。

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

使用React JS组件“循环”

2 个答案: