使用 React JS 的组件“循环”

Posted 2023-02-22

【中文标题】使用 React JS 的组件“循环”

【英文标题】：Component "loop" with React JS

【发布时间】：2015-12-13 18:56:37

【问题描述】：

我正在研究 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')
  );

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

未捕获的类型错误：无法读取未定义的属性“地图”。

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

【问题讨论】：

如果不调用 getImages 在组件上会挂载，你会得到同样的错误吗？不是，然后返回的数据结构在重新渲染时关闭

@Fernando - 该解决方案对您有用吗？

【参考方案1】：

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

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

并且在渲染方法中，您尝试将道具从 ImageBox 插入到 ImagesList 作为

data =  this.state.data.children 

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

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

注意。不要忘记验证上面评论中描述的 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)
  );
,

【参考方案2】：

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 应用程序的推荐方式