React项目页面刷新后useEffect请求获取的数据始终为空数组问题咨询

你遇到的报错本质是异步请求未完成时，渲染逻辑提前访问了空数组的索引属性：

1. 你初始化footerSidebars的默认值是空数组[]，在JS中空数组属于真值，所以你最开始写的footerSidebars &&判断永远会通过
2. useEffect里的接口请求是异步操作，页面刷新后第一次触发渲染时，请求还在等待响应，此时footerSidebars还是空数组，直接访问footerSidebars[0].body_response相当于访问undefined的body_response属性，自然抛出undefined错误
3. 站点导航跳转时正常，是因为跳转场景下React组件不会完全重置状态，可能前一次访问已经拉取过数据，或者跳转时请求已经提前完成，渲染时数组已经有值，不会触发报错

你添加footerSidebars.length &&的判断是完全可行的正确方案：
空数组的length属性为0，0属于假值，判断会直接阻断后续渲染逻辑，等接口请求完成后setFooterSidebars更新状态，数组length变为2，才会进入渲染分支，不会再出现访问空数组索引的问题。

如果要进一步提升鲁棒性，可以搭配可选链语法，避免后续接口返回结构变动、数组长度不足时再出现同类问题：

{footerSidebars.length && (
  <div
    dangerouslySetInnerHTML={{
      __html: DOMPurify.sanitize(footerSidebars[0]?.body_response),
    }}
  />
)}

另外你当前代码里定义的axios.CancelToken没有实际生效，两个axios.get请求都没有传入cancelToken: ourRequest.token的配置，组件卸载时无法正确取消 pending 中的请求，可以补充对应配置避免内存泄漏。
还有你在setFooterSidebars(sidebars)之后直接打印footerSidebars拿到的会是更新前的旧值，因为React的状态更新是异步批量执行的，如果要打印更新后的值，可以单独加一个useEffect监听footerSidebars变化。

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