在React中無法從mongodb獲取數據

Question

我有一個應用程序可以從mongodb加載數據到這樣的列表組件

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

然后我嘗試撥打http get呼叫ge這樣的數據

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不是一個函數 ，可能是什么問題？

Answer 1

map不是字符串函數，請查看數組映射的文檔： https : //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

此外，與錯誤無關，但是函數loadData返回未定義，因為您只是在進行ajax調用。 為了使它起作用，您需要在成功/錯誤掛鈎中使用react組件的state對象調用this.setState() 。

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

演示版