WillMount（）に設定された状態はDidMount（）にアクセスできない

Question

私は、componentDidMount()に関する情報を取得するためのAPI取得要求を必要とするコンポーネントを持っています。そのリクエストは、私がComponentWillMount()にある関数を介して設定している状態で保存された情報に依存します。

私willMount()ランは、その後、私は私のrender()方法を打つが、状態が設定されていない、ので、それはdidMount()を打つが、データがまだ状態でないため失敗します。どこが間違っていますか？

編集：すべての関数がコンストラクタにバインドされている（図示せず）

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

それが可能ならばあなたの機能は、彼らが戻ってきた後、彼らが要求する結果と状態を設定する意味非同期要求、に依存していますセンス。

メソッドをレンダリングする際、状態の有効性をチェックし、有効でない場合はnullを返します。レンダリングメソッドは、次に状態が設定されたとき（つまり、状態がコールバックに設定されているためにリクエストが成功したとき）に再び呼び出されます。

Answer 2

親コンポーネントからプロポーザルとして認可トークンを渡してから、componentWillReceivePropsフックを使用してAPIへのリクエストを開始してください。

Answer 3

両方のapi呼び出しによって返された約束を保存する必要があります。そして、componentDidMountのそれらの解決に、あなたはfetchSurveyFieldsのためにAPI呼び出しを行うべきです。この

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> 
    ) 
    }