Prop 可能是 Vue 3 设置中的未定义错误答案

【问题标题】：Prop is possibly undefined error in Vue 3 setupProp 可能是 Vue 3 设置中的未定义错误
【发布时间】：2021-06-01 03:01:57
【问题描述】：

console.log('test',props.list) 运行良好。但是props.list.map 不起作用。这是错误消息。

这是组件的代码我该如何解决这个错误？

<template>
  <div class="row">
      <div v-for="column in columnList" :key="column.id" class="col-4 mb-4">
          <div class="card-body">
            <div class="card h-100 shadow-sm" >
                <img :src="column.avatar" :alt="column.title">
                <h5>{{column.title}}</h5>
                <p>{{column.description}}</p>
                <a href="#" class="btn btn-primary">enter</a>
            </div>
          </div>

      </div>
  </div>
</template>

<script lang='ts'>
import { computed, defineComponent, PropType } from 'vue'

export interface ColumnProps{
    id: number;
    title: string;
    avatar?: string;
    description: string;
}

export default defineComponent({
  name: 'ColumnList',
  props: {
    list: {
      type: Array as PropType<ColumnProps[]>,
      require: true
    }
  },
  setup (props) {
    const columnList = computed(() => {
      console.log('test',props.list)
      return props.list.map(column => {
        if (!column.avatar) {
          column.avatar = require('../assets/default_avatar.jpg')
        }
        return column
      })
    })
    return { columnList }
  }
})
</script>

【问题讨论】：

标签： javascript typescript vue.js vue-component vuejs3

【解决方案1】：

我猜list 属性是由异步调用填充的。如果是这样，在定义props.list 之前，计算至少运行一次。当它未定义时，它没有.map 方法。

通过返回一个空数组来提供这种情况：

setup (props) {
  const columnList = computed(() => {
    if (!props.list) return [];         // ✅ Return an empty array if undefined
    return props.list.map(column => {
      if (!column.avatar) {
        column.avatar = require('../assets/default_avatar.jpg')
      }
      return column
    })
  })
  return { columnList }
}

【讨论】：

【解决方案2】：

这是打字稿错误 (TS2532)。道具类型未知。您需要为 props 参数指定一个类型，如下所示：

interface Props {
  list: ColumnProps[];
}

setup(props: Props) {
  ...
}

你当前的 props 定义只告诉 Vue 期望的 props 和类型，而不是 Typescript

【讨论】：

看起来逻辑清晰，但打字稿抱怨 setup() 方法错误No overload matches this call.ts(2769)

【解决方案3】：

我认为，唯一缺少的是 required 选项中的拼写错误。

改变

props: {
    list: {
      type: Array as PropType<ColumnProps[]>,
      require: true
    }
  },

到

props: {
    list: {
      type: Array as PropType<ColumnProps[]>,
      required: true // <-----  CHANGE TO "required"
    }
  },

【讨论】：

您的解决方案有效。我很好地理解了这个问题并同意map 未定义为setup 在安装之前运行。通常有两种方法可以解决 OP 的问题：a）为道具不可用的情况准备组件（您的解决方案，更详细）或 b）明确告诉组件它可以依赖可用的道具（我的解决方案）。他的方法表明他正在尝试 b) 在道具定义中使用拼写错误的 required 选项。修复错字为我修复了它。在父级中异步创建道具不是问题的一部分，您在这里猜测。
很遗憾，除非对问题进行编辑，否则我无法收回反对票。
如果父数据不是异步的，更正错字（您的“解决方案”应该是评论，而不是答案）将解决问题。我的解决方案适用于所有情况。他们不相等。我不会编辑我的答案，我只是建议你不要在这个网站上投票，如果你认为创建一行代码很冗长，特别是如果它可能是唯一正确的答案。（我很欣赏撤回投票的意愿。）

【解决方案4】：

您的错误来自打字稿。

这是因为 vue 为 typescript 定义道具的方式。如果你有required: true，那么你声明它不能是未定义的，否则它可能。

接受的答案在概念上是错误的，但它有效，因为您在访问值 if (!props.list) ... 之前检查 undefined 并且编译器足够聪明，可以知道这一点。

如果你知道它会被定义并且不想使用required: true，你可以写props.list!.map告诉编译器

【讨论】：