У каждого ребенка в списке должна быть уникальная «ключевая» опора: невозможно определить проблему в моем коде

Question

Я новичок в Typscript с React, и я получаю это сообщение об ошибке в моем элементе консоли Google Inspect. Я проверил много сообщений по этому поводу, но не смог понять, что пошло не так. Может ли кто-нибудь помочь исправить ошибку в моем коде?

index. js: 1 Предупреждение. У каждого дочернего элемента в списке должна быть уникальная "ключевая" опора.

Проверьте метод рендеринга PostList. Смотри

in div (at PostList.tsx:19)
in PostList (at pages/index.tsx:25)
in div (at pages/index.tsx:21)
in IndexPage (at App.tsx:68)
in component (created by Context.Consumer)
in Route (at App.tsx:65)
in div (at App.tsx:64)
in div (at App.tsx:85)
in Router (created by BrowserRouter)
in BrowserRouter (at App.tsx:84)
in App (at src/index.tsx:8)

 export default class PostList extends React.Component <Props, Post>{
 renderPosts(){
    const posts=Object.values (this.props.posts);
    return posts.map((n)=> <div>
         <h2> <Link to= {`/posts/${n._id}`}> {n.title}</Link></h2>
         </div>);
}
render(){
    return(
        <div>
            { this.renderPosts() }
        </div>
    )
 }
 }

Answer 1

Используйте ключ с тегом-оберткой div

return posts.map((n, index)=> <div key={index}>
             <h2> <Link to= {`/posts/${n._id}`}> {n.title}</Link></h2>
             </div>);

уникальные ключи лучше, индекс следует использовать только в качестве крайней меры

key={n._id}

Это предпочтительно.

Answer 2

Когда вы возвращаете html в функции карты, каждый элемент должен иметь уникальный ключ.

Пример: <div key={n._id}>...</div>

Подробнее об этом можно прочитать здесь: https://reactjs.org/docs/lists-and-keys.html

Answer 3

Всякий раз, когда вы выполняете операцию карты в реакции, l oop должен иметь уникальный ключ, чтобы определить, требуется ли повторный рендеринг во время процесса рендеринга реакции. Прочитайте ссылку ниже для более подробной информации см. Раздел ключей