如何在Axios请求完成后渲染React组件？请求前两次显示null

修改后的完整代码 #

import "./App.css";
import axios from "axios";
import { useEffect, useState } from "react";

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

  useEffect(() => {
    axios.get("https://app.ticketmaster.com/discovery/v2/events?apikey=AZAG8m4u5gq5HgkyYk0sdE9eAG32vGPT&locale=*")
      .then((res) => {
        setData(res.data);
        setIsLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setIsLoading(false);
        console.log("Error encountered", error);
      });
  }, []); // 添加空依赖数组，仅在组件挂载时执行一次请求

  // 加载状态时显示提示
  if (isLoading) {
    return <div className="App">加载中...</div>;
  }

  // 错误状态时显示错误信息
  if (error) {
    return <div className="App">请求失败：{error}</div>;
  }

  // 数据存在时渲染内容
  return (
    <div className="App">
      <h1>In Homepage</h1>
      {data?._embedded?.events?.map((event) => (
        <li key={event.id}>{event.name}</li>
      ))}
    </div>
  );
}

关键修改说明 #

• 给useEffect添加空依赖数组[]：原代码中useEffect无依赖数组，会导致组件每次渲染都重复发起请求，在React严格模式的开发环境下还会重复执行副作用，这就是出现两次null的核心原因。添加空依赖数组后，请求仅在组件首次挂载时执行一次。
• 新增加载状态isLoading：初始设为true，请求完成（成功或失败）后设为false，避免直接渲染null或未定义数据，同时给用户明确的加载反馈。
• 新增错误状态error：捕获请求失败信息，方便展示错误提示，提升用户体验。
• 可选链操作符?.保护：用data?._embedded?.events避免数据未加载时访问嵌套属性报错，配合条件渲染确保只有数据存在时才执行map操作。
• 给列表项加key属性：React列表渲染需要唯一key，避免控制台警告。

注意：React的渲染机制是异步的，无法让组件完全等待请求完成后再首次渲染。我们需要通过状态管理，控制不同阶段的渲染内容（加载、错误、成功），而非强制延迟渲染。

内容的提问来源于stack exchange，提问作者Gurbeer singh Sokhi