React Redux : 정의되지 않은 '0'속성을 읽을 수 없습니다.

Question

내 소품 내에서 데이터에 액세스하려고 할 때이 오류가 계속 발생합니다.

그래서 같은 @connect 데코레이터를 사용하는 소품에 상태를 매핑 해요 : 내가 this.props를 로그인 할 때

@connect((store) => { 
    return { 
     listAdProductsData: store.listAdProductsData.data, 
     foxFooterData: store.foxFooterData.data 
    } 

}) 

는 그러나, 나는 소품의 세 개의 인스턴스를 얻을. 두 개는로드시 채워지지 않으며 세 번째는 최종적으로 데이터로 채워집니다.

어떻게이 문제를 해결할 수 있습니까?

getData(prop) { 
     if (prop.data === undefined) { 
      return [{}]; 
     } 

     return prop.data; 
    } 

나는 또한 데이터를 가져올 componentWillMount 내에서 디스패치 기능을 가지고 : 내가 지금까지 찾은 유일한 방법은 "바보"는 데이터가 너무 같은 개체의 빈 배열이 있는지 확인하는 것입니다 - 이렇게하는 데 문제가 있습니까? :

componentWillMount() { 
     //Fetch Ad Products Data 
     this.props.dispatch(fetchAdProductsData()) 

     //Fetch List Ad Products Data 
     this.props.dispatch(fetchListAdProductData()) 

     //Fetch Fox Footer Data 
     this.props.dispatch(fetchFoxFooterData()); 

    } 

PROPS 로그 : 오류 메시지 :

JSON 데이터 :

import React from 'react'; 

import HeroVideo from '../../../assets/videos/HERO_Landing.mp4'; 

import styles from './styles.css'; 

export default class HeroModule extends React.Component { 
    render() { 
     let data = this.props.data[0]; 
     console.log("PROPS", data); 
     console.log("Get data", data.productData[0].adProductsHeading); 
     return (
      <div className="hero-wrap col-xs-12 no-padding"> 
       <div className="video-container"> 
        <video width="100%" height="auto" autoPlay loop muted className="fillWidth"> 
         <source src={HeroVideo} type='video/webm' /> 
         <source src={HeroVideo} type='video/mp4' /> 
         Your browser does not support HTML5 video. Please upgrade your browser! 
        </video> 
       </div> 
       <div className="hero"> 
        <div className="hero-header-wrap"> 
         <div className="hero-header"> 
          <h1></h1> 
          <h2>The big picture?</h2> 
          <button className="btn">Watch Video</button> 
         </div> 
        </div> 
       </div> 
      </div> 
     ) 
    } 
} 

Answer 1

나는를 제거 것 : 여기

내 구성 요소 코드 getData()에서 "바보 같이"체크하고 렌더링의 시작 부분에서이 라인()

if (!this.props.data) { // or !this.props.data.length if your have an empty array initially 
    return null; // or some loading indicator 
} 

이 방법을 사용하면 데이터가 성공적으로 채워 경우에만 실행됩니다 당신의 렌더링() 코드의 남아 있는지 확인하십시오.

상점에 initialState가있는 것이 좋습니다. 이렇게하면 "어리석은"수표의 필요성이 대체되고 예를 들어 빈 배열이있는 초기 데이터로 상점을 채 웁니다.

Answer 2

한 가지 해결책은 lodash _.get을 사용하여 데이터의 깊게 중첩 된 값에 안전하게 액세스하는 것입니다.

console.log(_.get(this.props, 'data[0].productData[0].adProductsHeading'))

데이터를 페치하기 전에

이 대신 오류를 던지는 undefined를 기록 할 것입니다.