Svelte子组件返回数组无法访问首个元素问题排查

我刚接触Svelte，怀疑遇到的是JavaScript相关问题。子组件通过父组件传入的URL获取JSON对象并返回，接收该对象后，我尝试访问数组索引0对应的元素值，却出现错误：Cannot read properties of undefined (reading '0')。去掉索引后能在控制台正常打印完整数组，但始终无法显示单个元素。我还尝试使用自定义fetchStore函数，结果问题依旧，相关代码如下：

import fetchStore from './fetch.js'
const [data, loading, error, get] = fetchStore(url)
$: console.log($data.results[0].name);

import { writable } from 'svelte/store'

export default function (url) {
    const loading = writable(false)
    const error = writable(false)
    const data = writable({})
    
    async function get() {
        loading.set(true)
        error.set(false)
        try {
            const response = await fetch(url)
            data.set(await response.json())
        } catch(e) {
            error.set(e)
        }
        loading.set(false)
    }
    
    get()
    
    return [ data, loading, error, get]
}

问题原因 #

这是因为初始渲染时数据还未加载完成：

• fetchStore初始化时把data设为了空对象{}，此时$data.results是undefined，直接访问[0]就会抛出Cannot read properties of undefined错误。
• 后续请求完成后data会被更新为包含results数组的对象，但初始渲染阶段的代码已经执行过一次，导致报错。

解决方法 #

你可以通过以下几种方式避免这个错误：

• 使用可选链操作符：
  直接在访问属性时添加?.，当属性不存在时会返回undefined而不报错：

  $: console.log($data.results?.[0]?.name);
  

• 结合loading状态判断：
  利用fetchStore返回的loading状态，只有在数据加载完成后再访问数组元素：

  $: if (!$loading && $data.results) {
      console.log($data.results[0].name);
  }
  

• 初始化data时设置默认的results数组：
  修改fetchStore中data的初始值，给results一个空数组，避免初始时results为undefined：

  const data = writable({ results: [] })
  

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