如何用 React js 迭代 json 数据？答案

【问题标题】：How to iterate json data with react js?如何用 React js 迭代 json 数据？
【发布时间】：2016-03-23 22:37:58
【问题描述】：

在这里，我已经包含了我的网页的 html 代码。每个类别都有不同种类的数据项和结构。它将从 json 对象中迭代数据。如何从 json api 获取数据以及如何用 react js 实现这一点？我正在努力寻找解决方案。

<div class="main">

      <div class="type-one">
        <div class="type-list">
          <div class="front">
            <img src="img/sample.png" alt="" width="143" />
            <h2>Lorem iplsum</h2>
            <div className="total-items">2 items</div>
          </div>
          <div class="back">
            <div class="list">Item1</div>
            <div class="list">Item2</div>
            <div class="list">Item3</div>
          </div>
        </div>
        <div class="type-list">
          <div class="front">
            <img src="img/sample.png" alt="" width="143" />
            <h2>Lorem iplsum</h2>
            <div className="total-items">2 items</div>
          </div>
          <div class="back">
            <div class="list">Item1</div>
            <div class="list">Item2</div>
            <div class="list">Item3</div>
          </div>
        </div>
      </div>

      <div class="message">
        <p>Lorem ipsum doler sit amet.</p>
      </div>

      <div class="type-two">
        <div class="type-list">
          <div class="front">
            <img src="img/sample.png" alt="" width="143" />
            <h2>Lorem iplsum</h2>
            <div className="total-items">2 items</div>
          </div>
          <div class="back">
            <div class="list">Item1</div>
            <div class="list">Item2</div>
            <div class="list">Item3</div>
          </div>
        </div>
      </div>

    </div>

这是代码，到目前为止我已经尝试过了。

var Category = React.createClass({
    render: function(){
        var list = this.props.data.map(function(el, i) {
            return  <div className="type-list" key={i}>
                      <div className="front">
                        <img src={el.category_img} alt="" />
                        <h2>{el.category_name}</h2>
                        <div className="total-items">{el.total_items} items</div>
                      </div>
                </div>;
        });

        return <div className="type-one">{ list }</div>;
    }
});

var data = [
    {
        category_name:"Lorem iplsum",
        total_items:2,
        category_img:"img/sample.png",
        sub:[
            {
                item_name:"item1"
            },
            {
                item_name:"item2"
            },
            {
                item_name:"item3"
            }
        ]
    },
    {
        category_name:"Lorem iplsum2",
        total_items:3,
        category_img:"img/sample.png",
        sub:[
            {
                item_name:"item21"
            },
            {
                item_name:"item22"
            },
            {
                item_name:"item23"
            }
        ]
    }
];

var Cover = React.createClass({
  render: function() {
    return (
        <div>
            <Category data={data}/>
        </div>
    );
  }
});

【问题讨论】：

@DERIIIFranz。我已经更新了代码。但是，这里我只实现了一个类别。

标签： javascript html json reactjs

【解决方案1】：

我建议使用 jQuery 的 ajax，因此：https://api.jquery.com/jQuery.ajax/

像这样使用它：

$.ajax({
  url: "path/to/api"
}).done(function(data) {
  this.setState({data: data})
});

在你的组件的componentWillMount() 中实现这个模式，你会没事的！

【讨论】：