React中useEffect与useState引发state undefined问题的排查与解决

多个组件出现相同的state undefined错误。排查后确认API可正常返回数据，无CORS拦截，且能在useEffect回调中获取数据，但问题疑似出在状态设置环节。尝试用useRef替换useState后，访问ref.current仍得到相同的undefined结果。

几天前功能一切正常，在开发后端代码后，今日打开页面出现白屏。

报错信息 #

Uncaught TypeError: can't access property "map", data is undefined

相关代码 #

Dashboard.tsx（首页路由组件） #

export default function Dashboard() {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState<ServiceStatus[]>([]);

  useEffect(() => {
    setLoading(true);
    server.monitor.services()
      .then(data => setData(data))
      .finally(() => setLoading(false));
  }, []);

  return (
    <div>
      <Title order={2}>Dashboard</Title>
      <BackToTop />
      <div>
        <LoadingOverlay visible={loading} overlayBlur={2} />
        {data
          .map(svc => <ServiceStatusListItem key={svc.value?.ServiceName} status={svc} />)}
      </div>
    </div>
  );
}

server.ts #

export const server = {
  monitor: {
    services: async () => {
      const url = `${hostname}/Monitor/Services`;
      const statuses = await fetch(url, addAuthorization()).then(resp => resp.json());
      return statuses as ServiceStatus[];
    }
  }
};

解决方案 #

编辑：解决方案 - 该TypeError是由于数据payload结构变更后类型转换错误导致的。

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