React状态initialPetData初始为空，重载后才显示数据的问题

我用这段代码将接口数据加载到initialPetData状态中：

useEffect(() => {
    setShowButton(true);
    fetch("http://localhost:8080/upload/recieve", {
        method: "GET",
        headers: {
            "Content-Type": "application/json",
        },
    })
        .then((res) => res.json())
        .then((data) => {
            console.log(data);
            setInitialPetData(data);
            console.log("Initial Pet Data: ", initialPetData);

            setEncodedImageData(data.imageSrc);
        });
}, []);

但控制台打印的initialPetData是空的，页面也渲染不出数据；可一旦修改代码保存、页面热重载后，宠物数据就正常显示了。

修改前控制台状态为空，修改后重载页面数据已填充完成。

原因 #

React的状态更新是异步的，调用setInitialPetData(data)后不会立刻更新initialPetData的值，所以紧接着的console.log打印的还是更新前的初始空状态。页面首次渲染时，initialPetData是空值，组件基于空值渲染，自然看不到数据。

当你修改代码保存后，热重载触发组件重新渲染，此时之前的异步请求已经完成，initialPetData已经被更新，所以能正常显示数据。

解决办法 #

• 正确查看状态更新结果：不要在调用setState后立即打印状态，改用useEffect监听状态变化：

useEffect(() => {
  console.log("更新后的宠物数据：", initialPetData);
}, [initialPetData]);

• 渲染时处理空状态：在组件渲染逻辑中先判断数据是否存在，避免空值导致的渲染问题，同时给用户加载提示：

return (
  <div>
    {initialPetData ? (
      // 这里编写宠物数据的渲染内容
      <div>宠物名称：{initialPetData.name}</div>
    ) : (
      <div>数据加载中...</div>
    )}
  </div>
);

• 添加请求异常处理：给fetch请求增加错误捕获，避免请求失败时状态一直为空且无报错提示：

useEffect(() => {
  setShowButton(true);
  fetch("http://localhost:8080/upload/recieve", {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
    },
  })
    .then((res) => {
      if (!res.ok) throw new Error("接口请求失败");
      return res.json();
    })
    .then((data) => {
      setInitialPetData(data);
      setEncodedImageData(data.imageSrc);
    })
    .catch(err => {
      console.error("加载宠物数据出错：", err);
    });
}, []);

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