SWR查询结果解构报错：为何只能通过data.results访问results？

这是正常现象，核心原因是SWR的data在请求完成前是undefined：

• SWR是异步请求库，组件初始化时请求还没完成，useSWR返回的data初始值为undefined。
• 直接写{data:{results}}解构时，相当于在undefined上读取results属性，必然会抛出"results未定义"的错误。
• 而用data.results的方式，当data为undefined时，表达式结果只是undefined，不会直接触发报错（除非你后续直接调用它的属性，比如data.results.length才会报错）。

解决办法 #

• 给解构添加默认值，避免初始阶段报错：

  const { data: { results } = {}, error } = useSWR("https://xxxxxxxxxxxxxxxx", fetcher)
  

  这里给data设置空对象作为默认值，就算data是undefined，也会用空对象解构，results会是undefined但不会抛出错误。
• 或者先判断data是否存在再解构：

  const { data, error } = useSWR("https://xxxxxxxxxxxxxxxx", fetcher)
  if (!data) return <div>加载中...</div>
  const { results } = data
  

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