警告：遇到两个 children 具有相同的键，`[object Object]

Question

亲爱的朋友们希望你们一切都好。我用 reactJs 构建了一个简单的 web 应用程序，我收到了很多警告，我搜索广告有很多相同的问题，我找不到任何解决方案，如果有人知道请帮忙。这是代码。

*index.js:1 Warning: Encountered two children with the same key, [object Object]. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

in div (at Post.js:133)
in Post (at Posts.js:34)
in div (at Posts.js:29)
in Posts (at App.js:62)
in div (at App.js:61)
in div (at App.js:59)
in Route (at App.js:57)
in Switch (at App.js:35)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:34)
in div (at App.js:33)
in div (at App.js:32)

这是所有警告最多的代码

return (
  <div className="post">
    <div className="adit" onClick={editMoreAndSettings}>
      <MoreVertTwoToneIcon className="editMoreAndSettings" />
    </div>
    <div className="dropdown-edit">
      <p>Edit</p>
      <p>Delete</p>
    </div>
    <div className="post__header">
      <Avatar className="post__avatar" alt="" src="" />
      <h4 className="h333">{username}</h4>
      <i className="post__verified" />
    </div>

    <h4 className="post__text">{caption}</h4>

    <img src={imageUrl} className="post__image" />
    <p className="timestamp">{new Date(timestamp?.toDate()).toUTCString()}</p>

    <div className="post__likeandlove">
      <i className="post__like" />
      <FavoriteOutlinedIcon className="post__heart" />
      <EmojiEmotionsOutlinedIcon className="post__anger" />
      <ThumbUpIcon className="iconss" />
      {/* <p className="likep">{noLikes} Likes</p>
       */}
      <p className="likep">
        {noLikes} {noLikes == 1 ? 'Like' : 'Likes'}
      </p>
    </div>
    <hr />

    <div className="post__likeoptions">
      <div className="like" onClick={likeHandle}>
        <i className={show} />
        <h3 className={show2}>Like</h3>
      </div>
      <div className="comment">
        <i className="comment2" />
        <h3 className="dope">Comment</h3>
      </div>
    </div>
    <form onSubmit={postComment}>
      <div className="commentBox">
        <Avatar className="post__avatar2" alt="" src={user?.photoURL} />
        <input
          className="commentInputBox"
          type="text"
          placeholder="Leave a comment..."
          value={comment}
          onChange={(e) => setComment(e.target.value)}
        />
        <input type="submit" disabled={!comment} className="transparent__submit" />
      </div>
      <p className="pressEnterToPost">Press Enter to post</p>
    </form>
    {comments.map((comment) => (
      <div key={comment} className={`comments__show ${comment.username == postUser?.displayName && 'myself'}`}>
        <Avatar className="post__avatar2" alt="" src={comment.photoURL} />
        <div className="container__comments">
          <p>
            <span>{comment.username}</span>
            <i className="post__verified"></i>&nbsp;{comment.text}
          </p>
        </div>
      </div>
    ))}
  </div>
);

我需要创建唯一密钥吗？

Answer 1

您正在提供一个对象作为 div 的键，该对象正在通过 React 转换为字符串 [object Object]。因此，所有映射元素都获得相同的键。出于性能原因，反应需要映射列表的唯一键。 https://reactjs.org/docs/lists-and-keys.html#keys-must-only-be-unique-among-siblings

有关 [object 对象] 的详细信息，您可以在此处阅读更多内容： What does [object Object] mean?

此错误的一种解决方案是将密钥更改为唯一的字符串或数字。

key={comment.username} or key={comment.id} should solve the issue. But the username and id should be unique.

Answer 2

错误发生的原因是你可能迭代了你的 Post 组件并且没有给他们一个 unique key

可以通过 两种方式消除错误:-

将 key 放入 Posts 和 Post 组件中：-

在Posts分量中：-

const Posts = () => {
  return (
    <div className="posts"> 
      <ImageUpload /> 
      {/* username={user?.displayName} */}
      {posts.map({id, post}) => (
        <Post key={id} otherProps={otherProps} />
      )}
    </div>
  )
}

在Post分量中：-

const Post = ({postId}) => {
  return (
    <div key={postId} className="post">  
      {/* content */}
    </div>
  )
}

或者将您的 .map() 完全移动到 Post 组件中

在Posts分量中：-

const Posts = () => {
  return (
    <div className="posts"> 
      <ImageUpload /> 
      {/* username={user?.displayName} */}
      <Post posts={posts} otherProps={otherProps} />
    </div>
  )
}

在Post分量中：-

const Post = ({ posts, otherProps }) => {
  return (
    {posts.map({id, post}) => (
      <div className="post">
        {/* content */}
      </div>
    )}
  )
}

警告：遇到两个 children 具有相同的键，`[object Object]

Warning: Encountered two children with the same key, `[object Object]

unique-key

object-object-mapping

reactjs