リアクションライフサイクルメソッド：componentDidMountでフェッチする

Question

ライフサイクルメソッドcomponentDidMountで簡単なフェッチを実行しようとしています。ただし、1秒のタイムアウトがない限り、結果はページに表示されません。私はフェッチの非同期性のためにそれを集めましたが、setTimeoutを使わずにそれを修正するにはどうすればいいですか？ componentDidUpdate作業/どのように使用しますか？

 constructor(props) { 
     super(props); 
     this.state = { value: '' }; 
     this.getValue= this.getValue.bind(this); 
     } 

     getValue() { 
      return (
       fetch(url, { 
        method: 'GET', 
       }).then(response => { 
        if (response.status >= 400) { 
         throw new Error('no response: throw'); 
        } 
        return response.json() 
       }).then(response => { 
        this.setState({value: response}); 
       }).catch((error) => { 
        this.setState({ 
         value: 'no response: catch' 
        }) 
       }) 
      ); 
     } 


    componentDidMount(){ 
     //this.getValue(); //does not work 
     setTimeout(() => this.getValue(), 1000); //this works & populates page 
    } 


    render() { 
      return (
        <div> 
        <div>{this.state.value}</div> 
        </div> 
      ) 
    } 

Answer 1

this.getValueメソッドをコンストラクタ内の適切なコンテキストにバインドしてください。あなたがあなたのsetTimeoutにそれを入れると、thisに暗黙的に束縛されている太い矢印の関数になります。

constructor(props) { 
    super(props); 
    this.getValue = this.getValue.bind(this); 
} 

getValue() { ... } 

componentDidMount() { 
    this.getValue(); 
}