显示一个数组，它是 useCollectionData 在反应中的结果

Question

我是 Firebase 的新手，正在练习聊天应用。 React 警告我的消息列表需要一个唯一的 key-id，这是由此行代码引起的：

{messages && messages.map(msg => <ChatMessage key={msg.id} message={msg} />)}

我不明白为什么它不拿我的钥匙={msg.id}。任何帮助表示赞赏。这是导致反应控制台错误的我的函数的快照：

function ChatRoom() { 
  const messagesRef = firestore.collection('messages');
  const query = messagesRef.orderBy('createdAt').limit(25);

  const [messages] = useCollectionData(query, { idField: 'id' });
  const [formValue, setFormValue] = useState('');

  return (
   <>
    <main>
      {messages && messages.map(msg => <ChatMessage key={msg.id} message={msg} />)}
    </main>
    <form onSubmit={sendMessage}>
      <input value={formValue} onChange={(e) => setFormValue(e.target.value)} placeholder="say something nice" />
      <button type="submit" disabled={!formValue}>️</button>
    </form>
  </>)
}

Answer 1

很有可能，msg.id对于所有记录来说不是唯一的。在您的情况下，您可以使用 index 作为 map 函数的第二个参数 -

{messages && messages.map((msg, index) => <ChatMessage key={index} message={msg} />)}

显示一个数组，它是 useCollectionData 在反应中的结果

display an array which is a result of useCollectionData in react

firebase

reactjs