React.js 서버에서 데이터로드 중

Question

서버에서 데이터를 가져 와서 사용하려고합니다. 하지만 이렇게 잘못되었습니다 - "정의되지 않은 속성 '지도'를 읽을 수 없습니다. 내가 이해하고있는대로 서버에서 데이터를 가져 오지 않습니다. 또한 console.log()로 데이터를 확인하려고 할 때 콘솔에 아무것도 표시되지 않습니다. 그리고 심지어 다른 구성 요소에서도 app.js를 제외한 console.log()가 작동하지 않습니다. 문제를 찾을 수 없습니다. 반응 코드에이 코드가 있습니다 .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을 반복적으로 중첩하고 실제로 사용하지 않습니다). 따라서 ProductListComponent을 ProductListContainer에서 가져오고 다른 방법으로 가져 오지 않아야합니다. 그리고 fail safe로 함수를 props.products에 실제로 내용이 있는지 검사하는 if 문에 포장하십시오.

읽기 어렵 기 때문에 이러한 구성 요소 중 일부의 이름을 바꾸는 것도 고려해 볼 수 있지만 그건 내 사업이 아닙니다.

편집 : 귀하의 코드가 이와 같이 보이는 경우 작동해야합니다.

컨테이너 요소

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;