如何在React中调用api之前执行setStates

class MyComponent extends React.Component {
  componentDidMount() {
    this.setState({ loading: true }); // 在调用API之前设置loading状态为true
    // 调用API的代码
  }

  // 其他组件代码

  render() {
    // 渲染组件
  }
}

class MyComponent extends React.Component {
  async componentDidMount() {
    await this.setStateAsync({ loading: true }); // 在调用API之前设置loading状态为true
    // 调用API的代码
  }

  setStateAsync(state) {
    return new Promise((resolve) => {
      this.setState(state, resolve);
    });
  }

  // 其他组件代码

  render() {
    // 渲染组件
  }
}

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true); // 在调用API之前设置loading状态为true
    // 调用API的代码
  }, []);

  // 其他组件代码

  return (
    // 渲染组件
  );
}