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

我相信有兩個問題。 但主要是，您需要在第一個render方法中返回ProductListComponent ，而不是ProductListContainer （當前，您將遞歸嵌套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;