向React组件传递数组类型Prop时出错，请求解决方案

核心问题及解决步骤 #

你的代码存在三个关键问题，逐一修复即可解决报错：

1. 列表元素缺少唯一key属性
   React渲染列表时，要求每个子元素必须具备唯一key，否则会触发警告甚至渲染异常。给Tag组件添加key：

const tagSet = tags.map(tagItem => {
    return (
        <Tag key={tagItem} tagName={tagItem}/>
    )
})

若tagItem存在重复可能，建议使用唯一ID标识；若列表不会重排序，也可临时使用索引作为key。

2. 处理tags未传递的边界情况
   如果父组件未传入tags属性，tags会默认是undefined，直接调用map会报错。可以通过两种方式处理：

// 方式1：解构时设置默认空数组
export function RandomItem ({propOne, propTwo, propThree, propFour, propFive, tags = []}) {
    // ...其余代码
}

// 方式2：使用可选链做空值判断
const tagSet = tags?.map(tagItem => {
    return (
        <Tag key={tagItem} tagName={tagItem}/>
    )
})

3. 修正不合法的HTML结构
   Tag组件返回的是<li>元素，而<li>必须作为<ul>或<ol>的直接子元素，不能直接嵌套在<div>中。修改RandomItem的返回结构：

return (
    <div>
       <ul>{tagSet}</ul>
    </div>
)

完整修复后的RandomItem组件 #

export function RandomItem ({propOne, propTwo, propThree, propFour, propFive, tags = []}) {

    const tagSet = tags.map(tagItem => {
        return (
            <Tag key={tagItem} tagName={tagItem}/>
        )
    })

    return (
        <div>
           <ul>{tagSet}</ul>
        </div>
    )
}

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