带依赖的useEffect在组件挂载时也触发，如何避免初始调用的undefined报错

问题根本原因 #

React 中 useEffect 的原生设计就是首次组件挂载阶段必执行一次，后续才会在依赖项发生变更时触发，这是为了满足「组件挂载时同步外部状态」的通用需求，并非设计缺陷。你遇到的报错是因为首次执行时data还处于useState的初始undefined状态，访问深层属性就会抛出异常。

解决方案 #

方案1：添加条件守卫（最简便，适配90%场景）

直接在useEffect逻辑最前方加非空判断，初始调用时数据未加载直接跳过后续逻辑即可：

const [data, setData] = useState();

useEffect(() => {
  // 初始data为undefined时直接返回，不执行后续逻辑
  if (!data) return;
  console.log(data.test.test);
}, [data]);

无需额外引入其他逻辑，实现成本最低。

方案2：封装自定义钩子跳过首次执行（通用复用方案）

如果项目中多处需要跳过useEffect的首次执行，可以用useRef存储首次渲染标记，封装成通用自定义钩子复用：

// 自定义钩子：跳过首次执行的useEffect
const useEffectSkipFirst = (callback, deps) => {
  const isFirstRender = useRef(true);
  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
      return;
    }
    return callback();
  }, deps);
};

使用时直接替换原生useEffect即可：

const [data, setData] = useState();

useEffectSkipFirst(() => {
  console.log(data.test.test);
}, [data]);

方案3：给state设置合理默认值

如果明确知道接口返回的数据结构，可以给useState设置兜底默认值，就算首次执行也不会抛出undefined报错：

// 初始值设置和返回结构一致的兜底对象
const [data, setData] = useState({ test: {} });

useEffect(() => {
  console.log(data.test.test);
}, [data]);

该方案适合只需要避免报错、不需要完全跳过逻辑的场景。

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