使用Nuxt+Strapi+Nuxt/Apollo报错Cannot read property 'content' of undefined求解决

Hey, let's break down this issue you're facing with Nuxt, Strapi, and Nuxt/Apollo.

问题原因 #

你碰到的这个报错本质是异步数据加载和页面渲染的时序问题：

• 你的Apollo查询是异步执行的，页面首次渲染时，aboutuses还是你在data里初始化的空数组[]。
• 这时候你直接尝试访问aboutuses[0].content，aboutuses[0]会是undefined，自然就抛出了"Cannot read property 'content' of undefined"的错误。
• 刷新页面后，Apollo会缓存之前请求到的数据，页面渲染时数据已经存在，所以功能就能正常运行了。

解决办法 #

这里有几个简单有效的修复方案，按推荐程度排序：

1. 使用可选链操作符（最简洁） #

ES6+的可选链操作符?.可以完美解决这种"访问深层属性时可能遇到undefined"的问题，它会在链上的某个值为undefined/null时直接返回undefined，而不是抛出错误。修改你的模板代码：

<template>
  <div>
    <div class="about-content">
      <div id="zwqkl" v-html="$md.render(aboutuses[0]?.content)"></div>
    </div>
  </div>
</template>

2. 添加条件渲染（最稳妥，还能加加载状态） #

通过v-if判断数组是否有数据，确保只有当aboutuses里有内容时才渲染对应的元素，还能顺便加个加载提示提升用户体验：

<template>
  <div>
    <div class="about-content">
      <div v-if="aboutuses.length > 0" id="zwqkl" v-html="$md.render(aboutuses[0].content)"></div>
      <div v-else>加载中...</div>
    </div>
  </div>
</template>

3. 初始化带默认结构的数组（备选方案） #

在data里给aboutuses初始化一个包含空对象的数组，这样aboutuses[0]不会是undefined，避免直接报错：

<script>
import aboutusQuery from '~/apollo/queries/aboutus/aboutus'
export default {
  name: 'about-us',
  data() {
    return {
      aboutuses: [{}]
    }
  },
  apollo: {
    aboutuses: {
      query: aboutusQuery
    }
  }
}
</script>

不过这个方案的可靠性稍差，如果API返回的数据结构和预期不符，还是可能出现问题，更推荐前两种方法。

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