警告：列表中的每个 child 都应该有一个唯一的 "key" 属性。 |盖茨比

Question

你好收到警告，告诉我列表中的每个 child 都应该有一个唯一的关键道具。我的组件有，但是警告一直出现。

我认为这是因为我在另一个组件中插入了组件，如果有人能告诉我如何修复它，请问？

这是我的不同文件：

这是我的查询 (index.js):

posts: allMarkdownRemark(
        filter: {fileAbsolutePath: {regex: "/posts/"}}, 
        limit: 5
        sort: {fields: frontmatter___date, order: DESC}) {
        edges {
            node {
              frontmatter {
                date(formatString: "DD MMMM YYYY", locale: "fr-FR")
                slug
                title
                excerpt
              }
              html
              id
            }
        }   
    }

我的 index.js :

const projects = data.projects.edges
<Projects projects={projects}/>

我的projects.js

    return (
    <>
        {projects.map(project => (
            <Project key={project.id} project={project}/>
        ))}
    </>
)

我的project.js

    return (
    <Col className="h-100" key={project.node.id} xs="12" md="6" lg="4">
        <div className="card p-5 h-100">
            <h3 className="text-center">{project.node.frontmatter.title}</h3>
            <div className="tags">
                {project.node.frontmatter.source && (
                    <a href={project.node.frontmatter.source} target="_blank" rel="noreferrer">Source</a>
                )}
                {project.node.frontmatter.demo && (
                    <a href={project.node.frontmatter.demo} target="_blank" rel="noreferrer">Démo</a>
                )}
            </div>
            <div className="mt-4" dangerouslySetInnerHTML={{__html: project.node.html}}>
            </div>
        </div>
    </Col>
)

Answer 1

在您的 projects 循环中，project.id 是 undefined，因此 key 无效（因为它在每次迭代中都没有不同）。尝试使用：

return (
<>
    {projects.map(project => (
        <Project key={project.node.id} project={project}/>
    ))}
</>

Answer 2

你也可以这样使用

return (
<>
    {projects.map((project,key) => (
        <Project key={key} project={project}/>
    ))}
</>

警告：列表中的每个 child 都应该有一个唯一的 "key" 属性。 |盖茨比

Warning: Each child in a list should have a unique "key" prop. | Gatsby JS

reactjs

graphql

gatsby