Reactjs에서 정의되지 않은 속성을 읽을 수 없습니다.

Question

일부 아약스 요청으로 일부 데이터를 읽으려고했지만 코드가 올바른지 확실하지 않습니다.

interface IProps { 
    data: IScheduler; 
} 

interface IState { 
    list: IScheduler; 
} 

export default class Page extends React.Component<IProps, IState> { 
    constructor(props: IProps) { 
    super(props); 
    this.state = { 
     list: this.props.data, 
    }; 
} 

public componentWillMount() { 
    this.getData(); 
} 

public getData =() => { 
    axios.get(myURL) 
     .then((response) => { 
      this.setState({list: response.data}); 
      console.log(response.data.generatedDate); //works 
     }) 
     .catch((error) => { 
      console.log("DIDN'T CATCH DATA", error); 
     }); 
    } 

public render(): JSX.Element { 
    const data: IScheduler = this.state.list; 

    // getting an error 
    console.log(data.creationDate); 

    return (
     <div className="container"> 
      <MyListCmp data={data}/> 
     </div> 
    ); 
} 

내가 오류를 참조하십시오 :

Uncaught TypeError: Cannot read property 'list' of undefined 

내가 시도 :

console.log(data); // or this.state.list 

그냥 정의의를 여기에 코드입니다.

데이터 예 :

Uncaught TypeError: Cannot read property 'generatedDate' of undefined 
Uncaught TypeError: Cannot read property 'meetings' of undefined 

가 어떻게 그것을 읽을 수 있습니다 : 나는 '회의'또는 'generatedDate을'읽고 싶은 때 같은 오류가 MyListCmp에서 발생

{ 
    "generatedDate": "12.12.2017", 
    "meetings": [ 

      ... 
    ] 
} 

? render() 또는 return()에서 아직 데이터를 가져 오지 않았습니까? 내가 말할 수있는

그 I는 다음과 같이 할 경우 :

const data: IScheduler = { 
    generatedDate: "12.12.2017", 
    meetings: [ 

      ... 
    ] 
} 

그것은 작동하지만,이 시점이 아니다. 일부 URL에서 가져와야합니다. 모든 조언을 부탁드립니다.

Answer 1

이 값은 값을 확인하거나 기본값을 제공하지 않고 값에 의존하려고 시도하는 예입니다. 당신이 쓴 :

public render(): JSX.Element { 
    const data: IScheduler = this.state.list; 

    // getting an error 
    console.log(data.creationDate); 

render()는 응답이 돌아올 시간이 아마 전에, 초기에 호출됩니다. 데이터가 아직 사용 가능하지 않더라도 을 올바르게 렌더링하는 방법을 제공하는 것입니다.. 종종 그 로딩 애니메이션을 의미하지만, 당신은 또한 단지 조건부로 데이터를 렌더링 할 수 있습니다

{this.state.list && <MyMeetingList meetings={this.state.list} />} 

왜이 작업을 수행을?

위의 내용은 "첫 번째 사실이 사실이라고 평가하는 경우 두 번째 작업 만 수행"에 대한 일반적인 지름길입니다. this.state.list이 정의되지 않은 경우 위식적이므로 표현식은 short-circuit evaluated을 false로 설정하고 &&의 오른쪽에있는 JSX는 무시됩니다.

왜 유용합니까?

반응 render 함수는이라는 함수가 호출됩니다. 언젠가 실험을하고 싶다면 render에 중단 점을 넣거나 거기에 log을 붙이십시오. 구성 요소의 복잡성과 데이터 변경 빈도에 따라 얼마나 자주 발생하는지 놀랄 수 있습니다. 이것은 비동기 연산이 완료되기 전에 적어도 한 번 호출 될 것이라는 것을 의미하며, 필요한 값이나 (위와 같은) 테스트를 위해 합리적인 기본값에 대해 미리 생각해 봐야합니다.

Answer 2

How can I read it? Is this possible that in render() or return() data hasn't fetched yet?

예. 따라서 undefined