1

我不知道为什么会发生这个错误。“项目”每个都有一个键。

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

Check the render method of `ProjectList`. See https://reactjs.org/link/warning-keys for more information.
    at Link (http://localhost:3000/static/js/vendors~main.chunk.js:98148:31)
    at ProjectList (http://localhost:3000/static/js/main.chunk.js:2233:3)
    at div
    at div
    at div
    at Dashboard (http://localhost:3000/static/js/main.chunk.js:754:1)
    at FirestoreConnect(Dashboard) (http://localhost:3000/static/js/vendors~main.chunk.js:93335:11)
    at Connect(FirestoreConnect(Dashboard)) (http://localhost:3000/static/js/vendors~main.chunk.js:96289:28)
    at Route (http://localhost:3000/static/js/vendors~main.chunk.js:98747:29)
    at Switch (http://localhost:3000/static/js/vendors~main.chunk.js:98949:29)
    at div
    at Router (http://localhost:3000/static/js/vendors~main.chunk.js:98382:30)
    at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:98002:35)
    at App
    at Provider (http://localhost:3000/static/js/vendors~main.chunk.js:96124:26)


call from https://github.com/iamshaunjp/React-Redux-Firebase-App/blob/lesson-39/marioplan/src/components/dashboard/Dashboard.js

编码

const ProjectList = ({projects}) => {
    return (
        <div className="project-list section">
            {projects && projects.map(project => {
              return (
                <Link to ={'/project/' + project.id}>
                <ProjectSummary project = {project} key = {project.id} />
                </Link>
              )
            })}
        </div>
              )}

export default ProjectList;

console.log("ProjectsSample" + JSON.stringify(projects));

ProjectsSample {"70Vy1qTygmot82hLTXqM":{"createdAt":{"seconds":1614322423,"nanoseconds":379000000},"content":"EE　JUMP","title":"おっとっと冬だぜ","authorUserName":"Zeke","authorId":"kvxg96HGuzL2vtoDS9G8FZSa8E53","answers":{"RFv6bJMG2dmiBqWNZX8O":{"content":"これが・・&quot;}}},"9A2cvtlOoaNHnJ9uxBCi":{"createdAt":{"seconds":1614678213,"nanoseconds":459000000},"authorId":"qzTZftjdF3NIr7TZ3kiC9hbgDym1","title":"tsukuda","authorUserName":"tsukuda","content":"desu."},"DqsnHsTEEY9ztExWuuCQ":{"authorId":12345,"title":"Tite","content":"arataihen","authorLastName":"Ninja","authorFirstName":"Net","createAt":{"seconds":1613974658,"nanoseconds":763000000}}}
4

1 回答 1

2

给文档一个镜头。如文档中所述，Keys 帮助 React 识别哪些项目已更改、添加或删除。这方面的重要亮点是数组中使用的键在它们的兄弟中应该是唯一的。但是，它们不需要是全球唯一的。

这就是说，当发生这种情况时，如果您按照 Mairaj 先生在评论中建议的那样映射兄弟组件，通常需要在层次结构中向上移动“键”属性。

const ProjectList = ({projects}) => {
    return (
        <div className="project-list section">
            {projects && projects.map(project => {
              return (
                <Link to ={'/project/' + project.id} key = {project.id} > //moved to parent here
                <ProjectSummary project = {project} />
                </Link>
              )
            })}
        </div>
              )}

export default ProjectList;
于 2021-03-02T12:48:35.683 回答