ES6 地圖錯誤：“警告：列表中的每個孩子都應該有一個唯一的“鍵”道具”

Question

React 元素之一返回錯誤，指出即使包含密鑰也丟失了。 紅色錯誤波浪線始終標記在key={post.id}的下一行。 如果有任何建議和意見，我將不勝感激。

更新：這是整個代碼

export const Feed = () => {
  const [posts, setPosts] = useState([])

  useEffect(() => {
    db.collection('posts').onSnapshot(snapshot => setPosts(snapshot.docs.map(doc => doc.data())))
  }, [])

  return (
    <div className='feed'>
      <div className='feed__header'>
        <h2>Home</h2>
      </div>

      <TweetBox />
        {posts.map(post => (
          <Post
            key={post.id}
            username={post.username}
            displayName={post.displayName}
            verified={post.verified}
            text={post.text}
            avatar={post.avatar}
            image={post.image}
          />
        ))}
    </div>
  )
}

export default Feed

這是存儲在 Firebase 中的“posts”數組：

Answer 1

我終於找到了為什么會這樣。 我需要將.toString()添加到鍵中以將其轉換為字符串。

Answer 2

嘗試添加另一個外部塊

例如：

    {posts.map((post, index) => (
              <div key={index}>
                <Post
                key={post.id}
                username={post.username} //<-red squiggle lined//
                displayName={post.displayName}
                verified={post.verified}
                text={post.text}
                avatar={post.avatar}
                image={post.image}
                />
              </div>
            ))}