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

Question

我正在尝试从服务器获取数据并使用它。但是我得到这样的错误 - “无法读取未定义的属性'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;

Answer 1

我认为有几个问题。但主要是，您需要返回 ProductListComponent，而不是第一个 render 方法中的 ProductListContainer(当前您正在递归嵌套 ProductListContainer ，然后就再也没有真正使用过它)。因此，您应该从 ProductListContainer 中导入 ProductListComponent，而不是相反。作为故障保险，将 map 函数包装在一个 if 语句中，检查 props.products 是否确实有内容。

我也会考虑重命名其中一些组件，因为它很难阅读，但这不关我的事。

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

容器元素

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;