盡管有 arry.includes，Array 仍將元素推入 Array 中

Question

我正在嘗試構建一個需要目錄的應用程序。 每次我更新組件時，它都會再次將數據推送到數組中，從而創建多個副本。 我嘗試通過添加 an.arry,includes 來解決這個問題。 但這並不能阻止它添加另一個數據。

 const Directory = () => {
  const [searchResults, setSearchResults] = useState([]);
  const [loading, setLoading] = useState(false);
  const { currentUser } = useContext(AuthContext);

  useEffect(() => {
    setLoading(true);
    const data = async () => {
      const q = query(collection(db, "users"), where("type", "==", "doctor"));
      const querySnapshot = await getDocs(q);
      querySnapshot.forEach((doc) => {
        const data = doc.data();
        if (!searchResults.includes(data)) {
          searchResults.push(data);
        }
      });
      setLoading(false);
    };
    data();
  },[]);
  console.log(searchResults);

Answer 1

看來您正在嘗試在此處比較不適用於 array.includes() 方法的對象。

javascript

const user1 = {name : "nerd", org: "dev"};
const user2 = {name : "nerd", org: "dev"};
user1 == user2; // is false

您需要搜索更具體的內容或嘗試比較對象。 無論哪種方式，您嘗試做的事情都很棘手，您可能需要探索lodash或其他方法來解決它

Answer 2

我找到了一個更簡單的方法！

 useEffect(() => {
    setLoading(true);
    const data = async () => {
      const q = query(collection(db, "users"), where("type", "==", "doctor"));
      const querySnapshot = await getDocs(q);
      querySnapshot.forEach((doc) => {
        const data = doc.data();
        const notInArray = searchResults.some(u => u.uid === data.uid);
        console.log(notInArray);
        if (notInArray === false) {
          searchResults.push(data)
        }
      });
      setLoading(false);
    };
    return () => {
      data();
    };
  }, []);