reactjs - 在初始安装时反应 useEffect 防止

Question

我在 useEffect 中有五个快照侦听器，我还有另一个调用 api 来从 firestore 获取数据并更新状态，但我面临的问题是每个初始挂载都调用了所有侦听器，我的目标是我希望仅在文档更改时调用所有侦听器
我尝试使用useRef它可以工作，但监听器不会触发

正如您在下面的示例中看到的， onSnapshot在初始安装期间打印

useEffect(() => {
    if (isFirstMount.current) return;
    someFirestoreAPICall.onSnapshot((snap) => {
          //called every initial mount
    });
 someFirestoreAPICall.onSnapshot((snap) => {
          //called every initial mount
    });
  }, []);

  useEffect(() => {
    if (isFirstMount.current) {
      isFirstMount.current = false;
      return;
    }
  }, []);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);

      let snap = await someFirestoreAPICall.get();

      setData(snap.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
      setLoading(false);
    };
    fetchData();
  }, []);

代码沙盒

Answer 1

我认为，您可以在 useEffect 块中使用条件。但也许useState在这里比useRef.

例如：

const [state, setState] = useState(null)

useEffect(()=>{
    if (state) {
        // do something
    }
}, [state])

useEffect 将在挂载时运行，并且每次您更改状态的值时，但条件内的代码只有在您将状态更改为真实值时才会运行。