React useApi Hook访问数组索引热更新正常 刷新浏览器报undefined错误

• 首次渲染时异步请求尚未完成：useEffect 中的网络请求是在组件挂载完成后才触发的，刷新页面后第一次渲染时请求还在pending状态，此时useApi返回的data还是你设置的初始值空数组[]，并非接口返回的对象结构。
• 访问路径不兼容空状态：你需要访问的数组嵌套在data的属性下，首次渲染时数组类型的初始值没有对应的属性，obj.data.field的值为undefined，此时尝试访问undefined[0]就会抛出你遇到的类型错误。
• 热更新不报错的原因：React热更新只会更新组件逻辑不会重置已有的状态值，热更新时之前的请求已经执行完成，data已经被赋值为接口返回的完整对象，所以可以正常读取数组索引。

方案1：使用可选链运算符兼容空状态 #

直接在访问数组索引的位置增加可选链判断，前面的值为 undefined 时会直接返回，不会抛出错误：

// 把原来的 obj.data.field[0] 改成
obj.data?.field?.[0]

方案2：先判断加载状态再渲染数据 #

在使用数据的组件中，优先判断加载状态，请求完成后再渲染依赖数据的内容：

const obj = useApi("http://localhost:1337/home")

// 异常状态处理
if (obj.error) return <div>数据加载失败</div>
// 加载中状态处理
if (!obj.isLoaded) return <div>数据加载中...</div>

// 后续代码可以安全访问 obj.data.field[0]

方案3：对齐初始值和接口返回结构 #

你当前useApi中data的初始值是空数组，但接口返回的data是对象结构，可以把初始值改成和接口结构对齐，避免空状态访问报错：

// 把useApi中的初始值
const [data, setData] = useState([]);
// 改成和返回结构匹配的初始值，这里的field替换为你实际的属性名，比如示例中的Een
const [data, setData] = useState({field: []});

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