如何使用條件更新 useState-hook？

Question

我正在使用 firebase 的反應掛鈎（useEffect 和 useState）。

我有一個用戶集合，可以毫無問題地從 firebase 獲得。 簡化的代碼如下所示：

const [users, setUsers] = useState([]);

  useEffect(() => {
    const unsubscribe = database.collection("users").onSnapshot((snapshot) => {
      snapshot.forEach((doc) => {
        const currentUser = {
          id: doc.id,
          ...doc.data(),
        };

        setUsers((oldUsers) => [...oldUsers, currentUser]);
      });
    });

    return () => {
      unsubscribe();
    };
  }, []);

到目前為止，一切都很好。

如果我現在更改用戶的某些屬性，則會觸發 firebase 並觸發 useEffect-hook（這就是我想要的）。

這里的問題是：通過這次觸發，我的用戶數組 (useState) 得到更新並再次被推送到相同的用戶。

我現在想要實現的是：

我只希望每個用戶在我的用戶數組中出現一次。 所以只有新用戶應該被添加到這個數組中。 我想我需要在 setUsers 方法中進行條件檢查。

我想過這樣的事情：

  setUsers(
          (oldUsers) =>
          {
            if (oldUsers.indexOf(currentUser) === -1) {
              oldUsers.push(currentUser);
            }
            
            // HERE I'M NOT SURE WHAT TO DO
            // how can I set my users to the updated oldUsers?
            // I made some first steps with those approaches...
            1) return oldUsers; 
            2) setUsers(oldUsers);
            3) [...oldUsers]
          }
        );

正如代碼注釋中提到的：如何將我的用戶更新/設置為更新版本（以防插入新用戶）或讓用戶保持原樣（無需再次添加）？

我感謝任何建議！

Answer 1

避免間接改變 state（使用Array.push或任何其他方式），它不一致。 如果沒有更改，則返回原始 state，如果有，則返回新的 object。 例如：

setUsers(oldUsers => {
  if (oldUsers.find(user => user.id === currentUser.id)) 
    return oldUsers;
  return [...oldUsers, currentUser];
});

在這種特殊情況下，如果沒有變化，您可能希望完全避免調用setUsers ，因為 state 本身可用（並且您可以之前檢查用戶的存在）。

---

作為旁注， indexOf檢查在這種情況下不起作用，因為您創建了一個新的 object（根據您在快照中獲得的數據）。 這就是為什么它在我的示例中是基於謂詞的查找。