reactjs - 使用 componentDidMount 访问 Promise

Question

我正在访问从我的模拟 API 返回的 promise 。 React 组件如下所示

import React from 'react';
import StudentListStatistics from './StudentListStatistics';
import StudentStatisticsApi from '../../api/mockStudentApi';

class AboutPage extends React.Component {
  constructor(props, context) {
      super(props, context);
      this.state = {
          studentsStatistics: []
      };

  }

componentDidMount() {
    StudentStatisticsApi.getAllStudentsStatistics().then(
        studentsStatistics => {
            this.setState({
                studentsStatistics: studentsStatistics

            });
            debugger;
        }
    );

    console.log(this.state.studentsStatistics);
}

render() {
    return (
        <div>
            <h2>Student Body Statistics</h2>
            <StudentListStatistics studentsStatistics={this.state.studentsStatistics}/>
        </div>
    );
}

模拟 API 看起来像这样

class StudentApi {
static getAllStudentsStatistics() {
    return new Promise((resolve, reject)=> {
        setTimeout(()=> {
            resolve(Object.assign([], studentsStatistics));
        }, 1000);
    });
}

我不确定为什么 this.state.studentsStatistics 始终是一个空数组。如果我单步执行代码，那么 StudentsStatistics 数组将从 then 回调中的模拟 API 中正确返回。

有人可以指出我可能缺少什么吗？

Answer 1

问题有两个:

• getAllStudentsStatistics() 是异步的，这意味着它最终会产生结果，但不会立即产生；
• setState() 也是“异步”的，因为它不会在调用后立即更改 this.state。

要解决这个问题并记录模拟数据，您需要首先等待 Promise 解析，然后还要等待 setState 确认状态已更改(通过 passing it a callback function ) :

componentDidMount() {
  let promise = StudentStatisticsApi.getAllStudentsStatistics();

  promise.then(studentsStatistics => {
    this.setState({
      studentsStatistics: studentsStatistics
    }, () => {
      console.log(this.state.studentsStatistics);
    }
  });
}

我认为这也意味着您的 StudentListStatistics 组件最初将使用空数组作为输入进行渲染。只有在 Promise 得到解决后，它才会收到模拟数据。