时间戳

首页 > 解决方案 > 唯一密钥道具仍然收到唯一密钥错误

reactjs - 唯一密钥道具仍然收到唯一密钥错误

问题描述

在经历了一个 for 循环后，我试图布置一个列表。我知道我必须给组件中的每个孩子一个“唯一的'关键'道具”，但无论我如何给予关键道具，我都会不断收到错误消息。键是唯一的，设置在最外面的组件上，并且是一个字符串，但我仍然收到“列表中的每个孩子都应该有一个唯一的“键”道具”错误通知。

for 循环

const ShowList = () => {
        let newList = []

        for (let i = 0; i < ListItems.length; i++) {
            newList.push(
                <>
                    <ListingItems
                        unit={ListItems[i]}
                        key={ListItems[i]}
                    />
                </>
            )
        }
        return newList;
    }

列表项组件

const ListingItems = ({ unit }) => {

    return (
        <>
            <Text h4 style={[styles.MainText, { color: FontColor }]}>
                {unit}
            </Text>
        </>
    )
}

标签： reactjsreact-nativekey

解决方案

删除片段<>，因为在您的特定情况下它是多余的，或者将其替换为<React.Fragment并为其分配一个键。

<React.Fragment key={i}>

推荐阅读