React : "this.state.x"를 함수로 사용하기 전에 데이터를 대기시키는 법? <p></p> 내가이 (가 <strong>기능 <code>getSlots</code></strong>에 <code>li</code> 배열 덕분에 렌더링 있습니다) <code>renders</code> 간단한 구성 요소를 가지고 ...

Question

나는 현재 반작용 배우고, 어떤 물건 초보자를위한 너무 쉽게되지 않습니다 :

render() { 
    return (
     <ul> 
      {this.getSlots(this.state.viewing).map(item => <li key={item}>{item}</li>)} 
     </ul> 
    ) 
    } 

getSlots 기능은 :

constructor (props) {...} 

getSlots (viewing) { 

    SOME STUFF... 

    const monday = this.state.house.monday 

    return SOME STUFF... 
    } 

componentDidMount() {...} 

render() {...} 

포인트가있다 getSlots은 componendDidMount에 가져올 데이터가 필요합니다. 사실이 시점에서 데이터를 가져 오기 전에 실행되기 때문에 getSlots이 작동하지 않습니다 (충돌합니다) (실행시 this.state.house.monday이 "비어 있음").

getSlots을 실행하기 전에 데이터를 가져올 때까지 기다리는 방법은 무엇입니까? 당신의 단서를 가져 주셔서 감사합니다. 데이터가

getSlots (viewing) { 

    if (!this.state.house) { 
     return []; 
    } 

    SOME STUFF... 

    const monday = this.state.house.monday 

    return SOME STUFF... 
    } 

때 가져온인지 아닌지

Answer 1

조건부 렌더링이 필요합니다. 비동기 적으로 필요한 데이터를로드하기 전에로드 할로드 상태를 제공하십시오. 그런

class WrapperComponent extends PureComponent { 
    constructor(props) { 
     super(props); 

     this.state = { 
      isLoaded: false, 
      data: null 
     }; 
    } 

    componentDidMount() { 
     MyApiCall.then(
      res => this.setState({ 
       // using spread operator, you will need transform-object-rest-spread from babel or 
       // another transpiler to use this 
       ...this.state, // spreading in state for future proofing 
       isLoaded: true, 
       data: res.data 
      }) 
     ); 
    } 

    render() { 
     const { isLoaded, data } = this.state; 
     return (
      { 
       isLoaded ? 
        <PresentaionComponentThatRequiresAsyncData data={ data } /> : 
        <LoadingSpinner /> // or whatever loading state you want, could be null 
      } 
     ); 
    } 
} 

Answer 2

이

constructor(){ 
...., 
this.state = { house: null} 
} 

처럼 constructor에, 인출하기 전에 빈 데이터와 상태를 초기화하고 검사 getSlots 방법에 조건을 넣을 수 있습니다 데이터가 도착하면이 상태를 간단히 설정하십시오.

componentDidMount(){ 
    fetch().then((houses) => { 
     this.setState({ houses: houses }) 
    }) 
} 

Answer 3

constructor() { 
    super() 
    this.state = { isLoading: true } 
} 

componentDidMount() { 
    ('fetch data').then(() => { this.setState({ isLoading: false }); }) 
} 

render() { 
    return (
    <div> 
     {!this.state.isLoading && ('your code')} 
    </div> 
); 
} 

뭔가 : 당신은 다음과 같은 일을 할 것입니다.