React项目中如何在Axios初始化请求完成后启动主应用？

你之前的两种写法都不符合React的组件渲染规则：

• 第一种在axios.get的then回调里返回组件没用，因为React组件的渲染逻辑必须直接返回JSX，异步回调里的返回值不会被React识别。
• 第二种把App改成async函数会报错，因为React组件不能是异步函数——async函数返回的是Promise，而React要求组件必须返回合法的JSX元素或null，所以才会触发错误#31。

下面是两种可行的解决方案：

一、函数组件方案（用useState + useEffect） #

利用React的状态管理和副作用钩子，先显示加载状态，等API请求完成后更新状态再渲染页面内容：

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

function App() {
  // 初始化状态：存储接口数据、加载状态、错误信息
  const [initData, setInitData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 定义异步请求函数
    const fetchInitData = async () => {
      try {
        const response = await axios.get('你的API地址');
        // 根据接口返回结果生成初始化数据
        const processedData = processResponseData(response.data);
        setInitData(processedData);
      } catch (err) {
        setError('数据加载失败');
      } finally {
        setLoading(false); // 请求完成后关闭加载状态
      }
    };

    fetchInitData();
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  // 根据状态渲染不同内容
  if (loading) {
    return <div>加载中...</div>;
  }

  if (error) {
    return <div>{error}</div>;
  }

  // 数据加载完成后渲染页面
  return (
    <div className="App">
      {/* 这里使用initData渲染内容 */}
      <h1>{initData.title}</h1>
      <p>{initData.description}</p>
    </div>
  );
}

// 处理接口返回数据的工具函数
function processResponseData(rawData) {
  // 根据你的需求处理数据，比如提取字段、格式化等
  return {
    title: rawData.data.title,
    description: rawData.data.desc
  };
}

export default App;

二、类组件方案 #

如果你的项目用的是类组件，可以在componentDidMount生命周期里发起请求：

import React, { Component } from 'react';
import axios from 'axios';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      initData: null,
      loading: true,
      error: null
    };
  }

  componentDidMount() {
    axios.get('你的API地址')
      .then(response => {
        const processedData = this.processResponseData(response.data);
        this.setState({ initData: processedData });
      })
      .catch(err => {
        this.setState({ error: '数据加载失败' });
      })
      .finally(() => {
        this.setState({ loading: false });
      });
  }

  processResponseData(rawData) {
    return {
      title: rawData.data.title,
      description: rawData.data.desc
    };
  }

  render() {
    const { loading, error, initData } = this.state;

    if (loading) {
      return <div>加载中...</div>;
    }

    if (error) {
      return <div>{error}</div>;
    }

    return (
      <div className="App">
        <h1>{initData.title}</h1>
        <p>{initData.description}</p>
      </div>
    );
  }
}

export default App;

核心思路是：

1. 组件初始渲染时显示加载状态（或者空白、骨架屏）
2. 在组件挂载完成后发起API请求
3. 请求完成后更新组件状态，触发重新渲染，展示处理后的页面内容

内容的提问来源于stack exchange，提问作者whitebear