如何正确使用 useEffect 来使用 Firestore 对数组状态进行修改？

Question

我正在使用 React firebase 制作一个类似于 Slack 的聊天应用程序。我正在听 useEffect 渲染中的状态变化。 （依赖是 []）。

我在这里遇到的问题是，当 onSnapshot 侦听器拆分更改的状态时如何触发更改。如果 change.type 是“已修改”，我使用 modifyCandidate（这是一个临时状态）来保存已更新的内容，并将此状态挂钩到第二个 useEffect 中。

第二个效果的问题是，没有chat的依赖，也就是chat的数组，chats中没有chat（初始渲染明显是这样）。为了获得聊天，我添加了另一个依赖项到第二个效果。现在，我遇到的另一个问题是，每当我面对数据库的更改或添加时，即使没有进行修改，也会触发第二个效果。

当只发生修改以及能够跟踪聊天的变化（从头开始）时，如何有效地执行第二个效果或

我在听力阶段有没有做一些尴尬的事情？

请分享您的想法！ （：

  useEffect(() => {
      const chatRef = db.collection('chat').doc('room_' + channelId).collection('messages')
      chatRef.orderBy("created").onSnapshot((snapshot) => {
      snapshot.docChanges().forEach((change) => {
        if (change.type === "added") {
            console.log("New message: ", change.doc.data());
        }
        if (change.type === "modified") {
          console.log("Modified message: ", change.doc.data());
          setModifyCandidate(change.doc.data());  
        }
        if (change.type === "removed") {
          console.log("remove message: ", change.doc.data());
        }
      });
    });
  }, [])

  useEffect(() => {
    if(!modifyCandidate){
      return
    }
    const copied = [...chats];
    const index = copied.findIndex(chat => chat.id === modifyCandidate.id)
    copied[index] = modifyCandidate
    setChats(copied)
  }, [modifyCandidate, chats])

最初，我也使用这个 useEffect 来加载聊天。

 useEffect(() => {
    const chatRef = db.collection('chat').doc('room_' + channelId).collection('messages')
    chatRef.orderBy("created").get().then((snapshot) => {
      const data = snapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      }));
      setChats(data);
    })
  }, []) 



return <>

{
chats.map((chat) => {
      return <div key={chat.id}>
        <ChatCard chat={chat} users={users} uid={uid} index={chat.id} onEmojiClick={onEmojiClick}/>
      </div>
    })
}
</>

Answer 1

使用 useMemo 代替第二个 useEffect。

  const chat = useMemo(() => {
    if(!modifyCandidate){
      return null
    }
    const copied = [...chats];
    const index = copied.findIndex(chat => chat.id === modifyCandidate.id)
    copied[index] = modifyCandidate

    return copied
  }, [modifyCandidate])