React中无法在useEffect钩子外访问获取到的数据问题求助

在React中使用useEffect钩子和fetch API从自建NodeJS服务器获取数据时，无法在useEffect回调外部访问这些数据。

代码示例：

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

const App = () => {
  const [LCS_Data, setLCSData] = useState({});

  useEffect(() => {
    fetch("http://localhost:5000/lcs")
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        console.log(data);
        console.log(data.LCS.info);
        setLCSData(data);
      });
  }, []);

  // console.log(LCS_Data.LCS.info);

  return <div className="main"></div>;
};

export default App;

useEffect内部的两个console.log能正常输出预期数据，但取消注释return前的console.log时，会抛出错误：

TypeError: Cannot read properties of undefined (reading 'info')

明明数据存在却报错，请问如何在useEffect外部访问数据对象内的属性以正常使用？

解决方案 #

这是React组件渲染流程导致的：组件首次渲染时，LCS_Data是你初始化的空对象{}，此时LCS_Data.LCS是undefined，访问info自然报错；而fetch是异步操作，数据返回后调用setLCSData才会更新状态、触发组件重新渲染，这时数据才真正存在。

可以用以下几种方法解决：

1. 初始化状态匹配数据结构 #

把初始状态改成和返回数据结构一致的空值，避免访问不存在的属性：

// 初始状态设置为包含LCS的空对象，匹配返回数据结构
const [LCS_Data, setLCSData] = useState({ LCS: { info: null } });

这样首次渲染时LCS_Data.LCS.info是null，不会触发报错。

2. 使用可选链操作符?. #

在访问嵌套属性时用可选链，当某个属性不存在时会返回undefined而不是报错：

// 安全打印属性
console.log(LCS_Data?.LCS?.info);

// 渲染时也可以用同样方式
return <div className="main">{LCS_Data?.LCS?.info}</div>;

3. 条件判断后再访问 #

在确保数据存在后再访问属性，比如用条件判断包裹：

// 打印前先判断
if (LCS_Data.LCS) {
  console.log(LCS_Data.LCS.info);
}

// 渲染时添加判断，还能显示加载状态
return (
  <div className="main">
    {LCS_Data.LCS ? <div>{LCS_Data.LCS.info}</div> : <div>加载中...</div>}
  </div>
);

4. 新增加载状态标记 #

额外加一个加载状态，明确区分数据未返回和已返回的状态：

const App = () => {
  const [LCS_Data, setLCSData] = useState({});
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetch("http://localhost:5000/lcs")
      .then((response) => response.json())
      .then((data) => {
        setLCSData(data);
        setIsLoading(false);
      })
      .catch(() => {
        setIsLoading(false);
        // 这里可以处理请求失败的情况，比如提示用户
      });
  }, []);

  // 加载中时显示占位内容
  if (isLoading) {
    return <div className="main">加载中...</div>;
  }

  // 此时数据已确定存在，可安全访问
  console.log(LCS_Data.LCS.info);
  return <div className="main">{LCS_Data.LCS.info}</div>;
};

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