在React中无法从mongodb获取数据

Question

i have an app which loads data from mongodb to list component like this

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

and then i try make a http get call to ge the data like this

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>
        );
    }
});

but when i load the app i get this error Uncaught TypeError: this.props.url.map is not a function what could the problem be ?

Answer 1

map is not a function for strings, check the documentation for array map: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Furthermore, not related to your error, but your function loadData returns undefined, because you are just making the ajax call. In order to make this work, you need to use the state object of the react component call this.setState() in your success/error hooks.

Answer 2

it's seems like you are not clear about the props and state of React you have to follow in below mentioned way

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