React Each child in a list should have a unique "key" prop

错误信息

Each child in a list should have a unique "key" prop. Check the render method of div. It was passed a child from PostItem. See https://react.dev/link/warning-keys for more information.

错误原因

在遍历数组时返回了React Fragment，而没有在Fragment上加key，把key加在了子元素上。

错误代码

将key加在了子元素上。

<span className={styles.label}>
    {
        post.topics.map((topic: string, index) => {
            return <>
                <a href={"/topic/" + topic} title={topic} className={styles.topic}
                         key={`${post.id}-${index}`}>{topic}</a>
            </>
        })
    }
</span>

正确代码

将key加在最外层元素上。

<span className={styles.label}>
    {
        post.topics.map((topic: string, index) => {
            return (
                <a href={"/topic/" + topic} title={topic} className={styles.topic}
                         key={`${post.id}-${index}`}>{topic}</a>
            )
        })
    }
</span>