无法从 React 中的 mongodb 获取数据答案

【问题标题】：can't get data from mongodb in React无法从 React 中的 mongodb 获取数据
【发布时间】：2016-02-25 11:51:30
【问题描述】：

我有一个应用程序可以从 mongodb 加载数据以列出这样的组件

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

然后我尝试进行 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>
        );
    }
});

但是当我加载应用程序时，我收到了这个错误Uncaught TypeError: this.props.url.map is not a function可能是什么问题？

【问题讨论】：

标签： javascript mongodb reactjs

【解决方案1】：

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

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

【讨论】：

【解决方案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

【讨论】：