Question

我有一个组件需要API获取请求来检索componentDidMount()上的一些信息。该get请求依赖于我在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

你应该保存两个api调用返回的promise。然后在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>
    )
  }

Answer 2

您的功能依赖于异步请求，这意味着他们通过请求设置状态。他们返回后的结果，如果这是有道理的。

在渲染方法中，检查状态的有效性，如果无效，则返回null。下次设置状态时将再次调用render方法（即，当您的请求成功时，因为状态在其回调中设置）。

Answer 3

如何将授权令牌作为父组件的prop传递，然后使用componentWillReceiveProps hook来触发对API的请求？

在DidMount（）中无法访问WillMount（）中设置的状态

3 个答案: