React在客户端呈现API数据

Question

我尝试在客户端获取一些API数据并进行渲染。但我不明白我该怎么办。我反应很新。所以我一直在创建一个React组件来获取api数据，但在渲染时我没有生成任何列表

在页面上加载api以嵌套对象

的形式加载一些初始数据

比组件应该解析这个结果子节点有大约10个元素

var Panel = ReactBootstrap.Panel;
var ProductBox = React.createClass({

  getInitialState: function() {
    return {
      data: [],
      products:[]
     };
  },
  componentDidMount: function() {
    $.get(this.props.source, function(result) {
      var products = jQuery.parseJSON(result);
      if (this.isMounted()) {
        this.setState({
          products:products.productItems.productItem
        });
      }
    }.bind(this));
  },
  render: function() {
    console.log(this.props.products);
    return (
      <div className="ProductBox">
      <div>
        <Panel header={this.state.products.name}>
          <img className="img-responsive" src="{this.state.image}"/>
        </Panel>
      </div>
      </div>
    );
  }
});


React.render(
  <ProductBox source="/my/api" />,
  document.getElementById('content')
);

Answer 1

你应该真的不为你的ajax请求创建一个全新的组件，因为你必须重写/复制组件在应用程序中有ajax的每个部分。

更好的解决方案是创建一个处理get，post等的模块，然后需要它并在整个应用程序中使用它。

Answer 2

当您设置状态时，您做错了。

$.get(this.props.source, function(result) {
      var products = jQuery.parseJSON(result);
      if (this.isMounted()) {
        this.setState({
          products:productItems.productItem
        });
      }
    }.bind(this));

那里没有定义

productItems。应该products正确吗？因为你正在做var products = jQuery.parseJSON(result);。