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

Posted 2023-02-23

【中文标题】Prop 可能是 Vue 3 设置中的未定义错误

【英文标题】：Prop is possibly undefined error in Vue 3 setup

【发布时间】：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" :>
                <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>

【参考方案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告诉编译器