React列表子元素缺少唯一key prop警告问题求助

问题出在你给内部按钮加了key，但map返回的顶级元素（包裹内容的<>）没有设置key。React要求列表中每个遍历生成的顶级元素必须有唯一key，而非内部子组件的key。

另外，短语法的<>无法添加key属性，需要换成完整的<React.Fragment>语法来设置key。

修改后的代码如下：

const catFilter=(categoryListCountAbove30: any[], InOrOut:any)=>{
        console.log('1stloaded')
        return categoryListCountAbove30.map((category) => (
             <React.Fragment key={category.id}>
                {categoryFilterId == category.id ?
                    (
                        <SelectCategoryBtn>
                            {category.categoryName}
                        </SelectCategoryBtn>
                    ) :
                    (
                        <CategoryBtn onClick={() => {
                            setCategoryFilterId(category.id)
                            setCategoryFilterName(category.categoryName)
                            {InOrOut=="inner"?(
                                setManufactureFilterId(""),
                            setManufactureFilterName(""),
                            setManufactureModelTypeId(""),
                            setManufactureModelTypeName(""),
                            // setFilterLetter("")
                            setGetToHome("Manufacturer")
                            ):[]}
                            console.log(category.id)
                        }}>
                            {category.categoryName}
                        </CategoryBtn>
                        
                    )}   
            </React.Fragment>

        ))
    }

原因说明 #

React渲染列表时，依靠每个列表项顶级元素的key来识别元素唯一性，以此高效更新DOM。你之前的写法中，每个遍历项的顶级元素是无key的Fragment，React无法区分每个项的身份，因此抛出警告。把key移到顶级的React.Fragment上后，React就能正确追踪每个列表项的变化，警告会随之消失。

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