React生命週期方法：在componentDidMount中獲取

Question

我試圖通過componentDidMount生命週期方法進行簡單的獲取。但是，除非我有一秒鐘超時，否則結果不會顯示在頁面上。我收集這是由於獲取的異步性質，但我怎樣才能解決這個問題，而不必使用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(); 
}