Javascript WillMount（）中的状态集在DidMount（）中不可访问

我有一个组件需要API get请求来检索有关

componentDidMount（）

的一些信息。get请求依赖于存储在状态中的信息，我正在通过调用

ComponentWillMount（）

上的函数设置该状态

我的

willMount（）

运行，然后我点击我的

render（）

方法，但状态尚未设置，因此它点击

didMount（）

但失败，因为数据尚未处于状态。我哪里做错了

编辑：所有函数都绑定在构造函数中（未显示）

componentWillMount（）{
这是。enforceEmployeeAuth（）；
这是loadEmployeeInfo（）；
}
componentDidMount（）{
this.fetchSurveyFields（）；
}
//初始检查以确认是否应允许用户访问任何信息。
enforceEmployeeAuth（）{
//获取确认当前用户为EMPLOYEE类型的请求
get（“用户/员工身份验证”{}，（res）=>{
//员工身份验证：如果是员工，则为True，否则为false
这是我的国家({
雇员授权：res.employee\u auth，
});
});
}
//加载当前用户/员工的相关信息
loadEmployeeInfo（）{
get（“client/currentEmployee”，{}，函数（res）{
这是我的国家({
雇员：res.employee，
雇员公司：雇员公司，
})
}.约束（这个）；
}
fetchSurveyFields（）{
调试器
API.get（‘客户/调查’{
调查：this.state.employee\u company.survey\u name
}，功能（res）{
调试器
})
}
render（）{
调试器
返回(
雇员准则
)
}

您的函数依赖于异步请求，这意味着它们在返回请求后使用请求结果设置状态，如果这样做有意义的话

---

在render方法中，检查状态的有效性，如果无效，则返回null。下次设置状态时（即，由于在回调中设置了状态，因此请求成功时），将再次调用render方法。

如何将授权令牌作为道具从父组件传递，然后使用componentWillReceiveProps钩子向API发出请求？

您应该保存两个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>
    )
  }

componentWillMount（）{
this.promises=[]；
this.promises.push（this.enforceEmployeeAuth（））；
this.promises.push（this.loadEmployeeInfo（））；
}
componentDidMount（）{
所有（这一切，承诺）
。然后（[resp1，resp2]）=>{
//如果你还想设定状态，你可以在这里看到。
this.fetchSurveyFields（）；
});
}
//初始检查以确认是否应允许用户访问任何信息。
enforceEmployeeAuth（）{
//获取确认当前用户为EMPLOYEE类型的请求
get（“用户/员工身份验证”{}，（res）=>{
//员工身份验证：如果是员工，则为True，否则为false
这是我的国家({
雇员授权：res.employee\u auth，
});
});
}
//加载当前用户/员工的相关信息
loadEmployeeInfo（）{
get（“client/currentEmployee”，{}，函数（res）{
这是我的国家({
雇员：res.employee，
雇员公司：雇员公司，
})
}.约束（这个）；
}
fetchSurveyFields（）{
调试器
API.get（‘客户/调查’{
调查：this.state.employee\u company.survey\u name
}，功能（res）{
调试器
})
}
render（）{
调试器
返回(
雇员准则
)
}

您需要等待的结果。get返回后才能使用数据。当从componentWillMount（）方法调用loadEmployeeInfo（）方法时，您是否检查loadEmployeeInfo（）方法中的数据状态是否已正确设置。我与调试器检查了流。如下所示：

willMount（）

-->运行函数<代码>渲染（）-->无状态更新

didMount（）

-->状态仍然没有更改，函数将失败<代码>呈现（）-->呈现第一个状态更改<代码>渲染（）rendered@Cruiser我认为你是对的，但是在我收到结果之前，我如何防止我的其他东西运行？你的

API.get

返回了一个承诺，当你的

组件安装运行时，这个承诺还没有实现-这就是为什么你的状态还没有数据
  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>
    )
  }