Lifecycle-Methoden reagieren: fetch in componentDidMount

Question

Ich versuche, einen einfachen Abruf durch die componentDidMount Lifecycle-Methode zu tun. Das Ergebnis erscheint jedoch nicht auf der Seite, es sei denn, ich habe eine Zeitüberschreitung von einer Sekunde. Ich habe festgestellt, dass dies auf die asynchrone Art des Abrufs zurückzuführen ist, aber wie kann ich das beheben, ohne setTimeout verwenden zu müssen? Würde componentDidUpdate arbeiten/wie würdest du es benutzen?

 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

Stellen Sie sicher, dass Sie Ihre this.getValue-Methode an den richtigen Kontext im Konstruktor binden. Wenn Sie es in Ihr setTimeout setzen, haben Sie es in einer fetten Pfeilfunktion, die implizit an this bindet.

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

getValue() { ... } 

componentDidMount() { 
    this.getValue(); 
}