React刷新部门页面时出现变量未定义错误求助

这个问题我碰到过，核心原因是页面刷新时数据加载的异步顺序问题，咱们一步步拆解：

为什么刷新会报错？ #

正常从列表跳转详情页时，App组件已经通过Context加载完了units数据，所以Department组件拿到的props.depts是有内容的数组，find方法能顺利找到对应部门。

但刷新页面时，整个应用会重新初始化：

1. Context里的units初始值是空数组[]，axios请求是异步的，需要时间才能拿到数据；
2. Department组件会先渲染，此时props.depts是空数组，useEffect里的find方法找不到匹配项，返回undefined；
3. 你把undefined传给了setDept，组件渲染时访问dept.Name，自然就抛出TypeError了。

另外还有个小疏漏：你的useEffect依赖数组里没加props.depts，就算后续Context加载完数据，useEffect也不会重新执行查找，dept会一直是undefined。

几个可行的解决方案 #

方案1：添加加载/空状态判断（推荐） #

在组件里先判断数据是否就绪，避免直接访问不存在的属性：

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';

const Department = props => {
  const { id } = useParams();
  const [dept, setDept] = useState(null); // 初始设为null，明确表示未加载/未找到

  useEffect(() => {
    // 确保有数据再执行查找
    if (props.depts.length) {
      const matchedDept = props.depts.find(item => item.Id === Number(id));
      setDept(matchedDept);
    }
  }, [id, props.depts]); // 把props.depts加入依赖，数据更新时重新查找

  // 处理未加载或找不到部门的情况
  if (!dept) {
    return <div>{props.depts.length ? '该部门不存在' : '加载中...'}</div>;
  }

  return (
    <div>
      <h1>{dept.Name}</h1>
    </div>
  );
};

export default Department;

方案2：用可选链安全访问属性 #

如果不想写额外的状态判断，可以用ES6的可选链操作符?.来避免报错，同时给个默认提示：

return (
  <div>
    <h1>{dept?.Name || '加载中...'}</h1>
  </div>
);

方案3：在App层做全局加载拦截 #

如果希望整个应用在数据未加载完时统一显示加载状态，可以在App组件里判断：

function App() {
  const { units } = useContext(UnitsContext);

  // 全局加载状态，数据未就绪时不渲染路由内容
  if (units.length === 0) {
    return <div>应用初始化中，请稍候...</div>;
  }

  return (
    <>
      <Navigation />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/people" component={Persons} />
        <Route exact path="/department/:id">
          <Department depts={units} />
        </Route>
      </Switch>
    </>
  );
}

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