In WillMount() nicht verfügbarer Status in DidMount()

Question

Ich habe eine Komponente, die eine API-Anforderung zum Abrufen bestimmter Informationen unter componentDidMount() erfordert. Diese Abrufanforderung beruht auf Informationen, die in einem Zustand gespeichert sind, den ich über die Funktionen ComponentWillMount() aufgerufen habe.

Meine willMount() läuft, dann habe ich meine render() Methode, aber der Status wurde nicht festgelegt, und so dann trifft es didMount() aber schlägt fehl, weil die Daten noch nicht im Status sind. Wo gehe ich falsch?

Edit: Alle Funktionen werden im Konstruktor (nicht dargestellt) gebunden

componentWillMount() { 
    this.enforceEmployeeAuth(); 
    this.loadEmployeeInfo(); 
    } 

    componentDidMount() { 
    this.fetchSurveyFields(); 
    } 

    // Initial check to confirm if the user should be allowed to access any information. 
    enforceEmployeeAuth() { 
    // Get request to confirm that the current user is of type EMPLOYEE 
    API.get("user/employee_auth", {}, (res) => { 
     // Employee Auth: True if employee, else false 
     this.setState({ 
     employee_auth: res.employee_auth, 
     }); 
    }); 
    } 

    // Load up relevant information for currentUser/employee 
    loadEmployeeInfo() { 
    API.get("client/currentEmployee", {}, function(res) { 
     this.setState({ 
     employee    : res.employee, 
     employee_company  : res.employee_company, 
     }) 
    }.bind(this)); 
    } 

    fetchSurveyFields() { 
    debugger 
    API.get('client/survey', { 
     survey: this.state.employee_company.survey_name 
    }, function(res) { 
     debugger 
    }) 
    } 

    render() { 

    debugger 

    return (
     <h2 className="text-charcoal text-left">Employee Rubric</h2> 
    ) 
    } 

Answer 1

Ihre Funktionen stützen sich auf asynchrone Anforderungen, die bedeuten, dass sie den Staat mit Anfragen die Ergebnisse gesetzt, nachdem sie zurückgekehrt sind, wenn das macht Sinn.

In der Rendermethode überprüfen Sie die Gültigkeit Ihres Status und geben null zurück, wenn sie ungültig ist. Die Rendermethode wird beim nächsten Setzen des Status erneut aufgerufen (d. H. Wenn Ihre Anforderungen erfolgreich sind, da der Status in ihren Callbacks festgelegt ist).

Answer 2

Sie können das Autorisierungstoken als Prop von einer übergeordneten Komponente übergeben und dann den componentWillReceiveProps-Hook verwenden, um die Anfrage an die API zu senden?

Answer 3

Sie sollten die Versprechen speichern, die von beiden API-Aufrufen zurückgegeben werden. Und dann auf Auflösung von denen in ComponentDidMount, sollten Sie api für fetchSurveyFields aufrufen. Gefällt Ihnen dieses

componentWillMount() { 
    this.promises = []; 

    this.promises.push(this.enforceEmployeeAuth()); 
    this.promises.push(this.loadEmployeeInfo()); 
    } 

    componentDidMount() { 
    Promise.all(this.promises) 
     .then(([resp1, resp2]) => { 
     //You can see here if you still wanna set state. 
     this.fetchSurveyFields(); 
     }); 

    } 

    // Initial check to confirm if the user should be allowed to access any information. 
    enforceEmployeeAuth() { 
    // Get request to confirm that the current user is of type EMPLOYEE 
    API.get("user/employee_auth", {}, (res) => { 
     // Employee Auth: True if employee, else false 
     this.setState({ 
     employee_auth: res.employee_auth, 
     }); 
    }); 
    } 

    // Load up relevant information for currentUser/employee 
    loadEmployeeInfo() { 
    API.get("client/currentEmployee", {}, function(res) { 
     this.setState({ 
     employee    : res.employee, 
     employee_company  : res.employee_company, 
     }) 
    }.bind(this)); 
    } 

    fetchSurveyFields() { 
    debugger 
    API.get('client/survey', { 
     survey: this.state.employee_company.survey_name 
    }, function(res) { 
     debugger 
    }) 
    } 

    render() { 

    debugger 

    return (
     <h2 className="text-charcoal text-left">Employee Rubric</h2> 
    ) 
    }