Question

我有一个应用程序，可以将数据从mongodb加载到列表组件，如下所示

React.render(<ProductsList url="http://localhost:3000/data"/>, document.getElementById('products'));

然后我尝试对ge这样的数据进行http get调用

var ProductsList = React.createClass({
  loadData: function() {
    $.ajax({
     url: this.props.url,
     dataType: 'json',
     success: function(data) {
       <ProductsList url={data}/>
     },
     error: function(xhr, status, err) {
       console.error(this.props.url, status, err.toString());
     }
   });
 },
    render: function() {
      this.loadData();
        var products = this.props.url.map(function(product) {
            return (
              <li key={product._id}>
                <Product data={product} />
              </li>
            )
        });

        return (
          <ul className="clearfix">
            {products}
          </ul>
        );
    }
});

但是当我加载应用程序时，我收到此错误未捕获的TypeError：this.props.url.map不是函数问题是什么？

Answer 1

map不是字符串函数，请查看数组映射的文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

此外，与您的错误无关，但您的函数loadData返回undefined，因为您只是进行ajax调用。为了完成这项工作，您需要在成功/错误挂钩中使用react组件调用state的{{1}}对象。

Answer 2

它似乎你不清楚你必须按照下面提到的方式遵循React的道具和状态

var ProductsList =React.createClass({
  getInitialState:function()
  {
    return{
      url:[]
    }
  },
  componentDidMount:function()
  {
    var that=this;
     $.ajax({
     url: 'https://api.github.com/users/mralexgray/repos',
     dataType: 'json',
     success: function(data) {
      that.setState({url:data});
     },
     error: function(xhr, status, err) {
       console.error(this.props.url, status, err.toString());
     }
   });
  },
  ChangeContent:function()
  {
    this.setState({content:"change Content"});
  },
  render:function()
  {
     var Products = this.state.url.map(function(product) {
            return (
              <li key={product._id}>
                {product.full_name}
              </li>
            )
        });
    return(
      <div>
       {Products}
      </div>
      )
  }
});
React.render(
  <ProductsList  />,
  document.getElementById('example')
);

Demo

无法在React

2 个答案: