React中fetch/axios数据返回不及时及componentWillMount渲染问题解决

嘿，这个问题其实是React异步数据加载里的常见坑，我来给你捋清楚怎么解决～

首先得纠正一个关键误区：你没法强制让fetch/axios在render()之前完成加载，因为React的客户端渲染流程是先挂载组件，再处理异步操作的。而且componentWillMount现在已经被React标记为不安全的生命周期（改名为UNSAFE_componentWillMount），官方完全不推荐用来发起异步请求——它可能会被多次调用，甚至在服务端渲染时引发奇怪的问题。

下面是两种主流场景的正确解决方案：

一、类组件的实现方案 #

1. 先初始化状态，处理加载/错误场景 #

先在组件的state里定义好数据、加载状态、错误状态，这样render的时候可以根据状态给用户明确反馈：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
      isLoading: true,
      error: null
    };
  }

2. 在componentDidMount里发起请求 #

这个生命周期方法是组件挂载后唯一调用一次的地方，最适合发起异步请求：

componentDidMount() {
    // 使用fetch的示例
    fetch('你的接口地址')
      .then(response => {
        if (!response.ok) {
          throw new Error('请求失败，请稍后重试');
        }
        return response.json();
      })
      .then(fetchedData => {
        this.setState({
          data: fetchedData,
          isLoading: false
        });
      })
      .catch(err => {
        this.setState({
          error: err.message,
          isLoading: false
        });
      });

    // 如果你用axios，写法更简洁：
    // axios.get('你的接口地址')
    //   .then(response => {
    //     this.setState({
    //       data: response.data,
    //       isLoading: false
    //     });
    //   })
    //   .catch(err => {
    //     this.setState({
    //       error: err.message,
    //       isLoading: false
    //     });
    //   });
  }

3. 根据状态渲染对应内容 #

在render里判断当前状态，避免组件渲染空数据：

render() {
    const { data, isLoading, error } = this.state;

    if (isLoading) {
      return <div>加载中，请稍候...</div>;
    }

    if (error) {
      return <div>出错了：{error}</div>;
    }

    // 数据加载完成后渲染业务内容
    return (
      <div>
        <h2>获取到的数据：</h2>
        <pre>{JSON.stringify(data, null, 2)}</pre>
      </div>
    );
  }
}

二、函数组件的实现方案（React 16.8+） #

如果是用函数组件，配合useState和useEffect钩子，写法会更清爽：

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

function YourComponent() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        // fetch写法
        const response = await fetch('你的接口地址');
        if (!response.ok) {
          throw new Error('请求失败');
        }
        const result = await response.json();
        setData(result);

        // axios写法
        // const response = await axios.get('你的接口地址');
        // setData(response.data);

        setIsLoading(false);
      } catch (err) {
        setError(err.message);
        setIsLoading(false);
      }
    };

    fetchData();
  }, []); // 空数组表示这个effect只在组件挂载时执行一次

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

  if (error) {
    return <div>出错了：{error}</div>;
  }

  return (
    <div>
      <h2>获取到的数据：</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

三、为什么不能让render等数据？ #

React的客户端渲染逻辑是先渲染组件（保证页面不空白），再处理异步操作。如果强制让render等待数据，会阻塞UI线程，导致页面长时间空白，用户体验极差。正确的做法是先展示加载状态，数据回来后再更新视图——这也是前端异步数据加载的标准模式。

如果你的场景是需要在页面渲染前就拿到数据（比如SEO需求），那可以考虑使用服务端渲染（SSR）或者静态站点生成（SSG）方案，比如Next.js的getServerSideProps或getStaticProps，它们会在服务端提前获取数据，再把带数据的页面返回给客户端。

内容的提问来源于stack exchange，提问作者Vỗ Cát Thư