React中外部无法访问函数内赋值的对象属性问题求助

你遇到的问题核心在于没有用React的状态管理来处理异步获取的数据，再加上异步操作的执行时机问题，导致你在外部访问属性时拿到的是初始值，自然会报错。

具体问题拆解： #

1. 异步操作的执行顺序
   你的onLoadSerivces（注意拼写错误，应该是onLoadServices）是在组件挂载的useEffect里异步执行的。组件初始渲染时，外部的console.log("Second log ", allServices[0])会先跑，这时候allServices还是你一开始定义的那个单个对象{ id: '', ... }，所以allServices[0]是undefined，访问它的status属性就会抛出TypeError: Cannot read property 'status' of undefined。

2. 全局变量不触发组件重渲染
   当异步请求完成后，你给全局变量allServices赋值了新的数组，但它不是React的状态（useState），组件不会因为这个变量的变化重新渲染。所以外部的console.log不会再次执行——你在控制台看到的完整对象，其实是浏览器的「实时展开」特性，它显示的是对象当前的状态，但代码执行时的快照是初始的单个对象。

3. 代码里的小笔误
   你在onLoadSerivces里写了allServices = response.data.data，但前面已经解构了const { data } = await api.get(/service);，所以应该改成allServices = data.data（或者根据接口实际返回结构调整，比如如果data直接是数组就写allServices = data）。

解决方案：改用React状态管理 #

把allServices改成组件内的useState状态，这样数据更新时组件会自动重渲染，你就能在任何地方拿到最新的值：

const Dashboard = () => {
  const classes = useStyles();
  const [filters, setFilters] = useState({});
  const [technicians, setTechnicians] = useState([]);
  // 用useState定义状态，初始值设为空数组（匹配接口返回的数组结构）
  const [allServices, setAllServices] = useState([]);

  useEffect(() => {
    onLoadServices();
    onLoadTechnicians();
  }, []);

  const onLoadServices = async () => {
    try {
      const { data } = await api.get(`/service`);
      // 用setAllServices更新状态
      setAllServices(data.data);
      // 注意：刚set完状态，当前渲染周期里allServices还是旧值，要等下一次渲染才会更新
    } catch (err) {
      let error = JSON.stringify(err.message);
      alert(error);
    }
  };

  // 组件每次渲染都会拿到最新的allServices
  console.log("Second log ", allServices[0]);

  // 如果需要在数据更新后执行操作，可监听allServices变化
  useEffect(() => {
    if (allServices.length > 0) {
      // 这里可以安全访问属性
      console.log("服务状态：", allServices[0].status);
    }
  }, [allServices]);

  // ... 其他组件代码
};

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