React中传入数组类型prop时调用map方法报undefined错误如何解决？

错误原因 #

这个报错的核心原因是你调用map方法的tags变量为undefined，具体触发场景通常是以下两种：

• 存在没有传入tags属性的Card组件调用场景，比如你有其他地方写了<Card />没有传tags，此时组件内解构拿到的tags就是undefined
• 你传入的tags来自异步接口请求，定义tags的初始值没有设为空数组，首次渲染时接口还没返回数据，tags还处于undefined状态

修复方案 #

选任意一种即可：

1. 解构props时直接给tags设置默认值

const { tags = [] } = props;

2. 调用map时用可选链做兼容判断

{tags?.map((tag) => ( <Tag>{tag}</Tag> ))}

3. 给组件添加默认属性配置，更符合组件规范

// 引入PropTypes后添加以下配置
Card.propTypes = {
  tags: PropTypes.array
}
Card.defaultProps = {
  tags: []
}

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