Question

我正在尝试从服务器获取数据并使用它。但我得到这样的错误 - “无法读取未定义的属性'地图'”。据我所知，它不是从服务器获取数据。而且当我尝试使用console.log（）检查数据时，控制台中没有显示任何内容。甚至来自其他组件的console.log（）除了app.js不起作用。我只是找不到问题....我在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方法中返回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;

React.js从服务器加载数据

1 个答案: