javascript - React.js从服务器加载数据

我正在尝试从服务器获取数据并使用它。但是我收到这样的错误-“无法读取未定义的属性'map'”。据我了解，它不是从服务器获取数据。而且，当我尝试使用console.log（）检查数据时，控制台中也没有显示任何内容。甚至从app.js之外的其他组件console.log（）也无法正常工作。我只是找不到问题...。我在react.js中有以下代码：

  import  React, { Component } from 'react';
    import axios from 'axios';

    class ProductListContainer extends Component {
    constructor(props){
        super(props);
        this.state = { products : []};
        console.log ('ProductListContainer constructor');
    }

    componentWillMount (){
        var self = this;
        axios.get('https://itpro2017.herokuapp.com/api/products')
        .then ((result) => {
            self.setState({products:result.data});
            console.log(result + ' data');
        })
        .catch ((error) => {
            console.log(error);
        })

    }

render()
{
    return <ProductListContainer products={this.state.products}/>
}
};

      import  React from 'react';
      import ProductCardComponent from
     '../ProductCardComponent/ProductCardComponent';
       import ProductListContainer from
      'C:/Users/DoNata/Desktop/JavaTechnologijos/new-shop/src/container/';
      import './ProductListComponent.css';


    var ProductListComponent = function(props) {
     var productCards = props.products.map((product, index) => {
      return (
         <ProductCardComponent
         key={index}
         id={product.id}
        image={product.image}
        title={product.title}
        description={product.description}
        price={product.price}
         />
        );
      });
       return (
      <div className="row">
        {productCards}</div>
       );
    };

     export default ProductListComponent;

最佳答案

我相信有两个问题。但主要是，您需要在第一个ProductListComponent方法中返回ProductListContainer，而不是render（当前，您递归嵌套ProductListContainer，然后再也不会实际使用它）。因此，您应该从ProductListComponent内部导入ProductListContainer，而不是相反。作为故障保险，将map函数包装在if语句中，以检查props.products实际是否包含内容。

我还将考虑重命名其中的某些组件，因为很难阅读，但这不关我的事。

编辑：我相信，如果您的代码看起来像这样，它应该工作。您将必须调整ProductListContainer文件顶部的import语句以指向正确的文件：

容器元素

import  React, { Component } from 'react';
import axios from 'axios';
import ProductListComponent from './wherever/this/is/located'

class ProductListContainer extends Component {
  constructor (props) {
    super(props);
    this.state = { products : []};
    console.log ('ProductListContainer constructor');
  }

  componentWillMount () {
    var self = this;
    axios.get('https://itpro2017.herokuapp.com/api/products')
      .then ((result) => {
        self.setState({products:result.data});
        console.log(result + ' data');
      })
      .catch ((error) => {
        console.log(error);
      })
  }

  render () {
    return <ProductListComponent products={this.state.products} />
  }
};

组成元素

import  React from 'react';
import ProductCardComponent from
'../ProductCardComponent/ProductCardComponent';
import './ProductListComponent.css';


var ProductListComponent = function(props) {
  var productCards
  // check that props.products has anything in it
  if (props.products.length) {
    productCards = props.products.map((product, index) => {
      return (
        <ProductCardComponent
          key={index}
          id={product.id}
          image={product.image}
          title={product.title}
          description={product.description}
          price={product.price} />
      );
    });
  } else { // otherwise, just return an empty div until the server response
           // comes back
    productCards = <div />
  }

  return (
    <div className="row">
      {productCards}
    </div>
  );
};

export default ProductListComponent;