不知道为什么反应中的这个异步调用有效

Question

我正在玩 reactjs，这就是我正在做的事情： 正在从 API 检索数据并显示数据 使用 axios 调用 API。 我知道 axios 调用是异步的并且是基于 Promise 的。

我的理解是在 react 'setState' 中只能在组件挂载后调用 （发生在 componentDidMount 中）。 所以对 API 的调用是在 'componentDidMount' 中进行的

我不清楚的是：为什么会这样，为什么要显示数据？

我正在阅读 here 'render' 在 'componentDidMount' 完成之前被触发

所以鉴于“render”在“componentDidMount”之前，我很困惑为什么数据加载并显示正常？

我还查看了this site，它使用一些标志来确定数据是否已加载，然后决定是否显示微调器 我也不必做任何这样的事情 因此，虽然它确实显示数据，但我相信还有更多...

代码如下：

class StudentsPage extends React.Component{
constructor(props){
    super(props);

    this.state = {
        isLoaded: false,
        studentListArray: []
    }
}


 componentDidMount(){
       /** now get results from api call and need to set the result to the state of this class */

       /** setting state MUST happen using setState and no other way - this is important */
       /** NOTE below call to setState will ONLY modify the attribute 'studentListArray' of state
        *  if there were other attributes / properties in state they would not get impacted / modified
        *  so setState is more like setters for individual properties 
        *  you can change multiple properties in one setter OR call setState for each property you want to change !
        */

     /** define the endpoint to be called */
    const baseUrl = process.env.REACT_APP_API_URL + "/studentList/";
    axios.get(baseUrl).then(({data}) => {
        this.setState(
            { studentListArray: data }
       );            
    })

  }
render(){ 
    return(
        <React.Fragment>
        <table className="table">
            <thead>
                <tr>
                    <th>Sudent ID</th>
                    <th>Student subject</th>
                </tr>
            </thead>

            <tbody>
                {this.state.studentListArray.map((student) => {
                    return (<tr>
                        <td>{student.id}</td>
                        <td>{student.subject}</td>
                    </tr>);

                })}
            </tbody>
        </table>
        </React.Fragment>
    );
}
}

Answer 1

当一个基于类的组件被挂载时，它的生命周期方法按以下顺序执行：

1. constructor()
2. static getDerivedStateFromProps()
3. render()
4. componentDidMount()

在您的情况下，在安装 StudentPage 组件后，它会立即尝试获取数据，然后触发组件更新/重新渲染。

当组件重新渲染时，它会按以下顺序调用以下生命周期方法：

1. static getDerivedStateFromProps
2. shouldComponentUpdate()
3. render()
4. getSnapShotBeforeUpdate()
5. componentDidUpdate()

如果您在render()、componentDidMount() 和componentDidUpdate() 中放置一个断点或简单的console.log()，您将能够更清楚地看到这一点。

这纯粹是我的猜测，但您调用的（我假设是本地的）服务器可能会更快地响应您期望的数据，因此数据似乎很容易获得在第一次安装时。

如果您想了解更多有关 React 生命周期方法的信息，请随时参考 the official React documentation。