时间戳

首页 > 解决方案 > 侦听器不使用依赖数组触发 useEffect

reactjs - 侦听器不使用依赖数组触发 useEffect

问题描述

这里的目标是在 Firebase 中修改数据时更改表数据

问题是由于某种原因，在firebase侦听器的范围内，setState(...)不会触发useEffect(()=> {}, [...])具有适当依赖项的 。

知道为什么，有没有办法强制改变？

 const [actions, setActions] = useState([]);
 ....
 firebase.
    .firestore()
    .collection("collection_name")
    .onSnapshot(s => {
      if (!s.empty) {
        s.docChanges().forEach(change => {
          if (change.type === "modified") { 
            const newActions = [...actions, change.doc.data()]
            setActions(newActions) //The change 
            console.log("arrived here")
          }...

...

useEffect(() => {
  console.log("change in actions"); // Does not triggered on when modified
}, [actions]);

这在没有依赖数组的情况下工作：

useEffect(() => {
  console.log("This does work")
});

标签： reactjsfirebasegoogle-cloud-firestorereact-hooks

解决方案

我认为您应该查看其他参考资料。

react hook的事情是，如果setter前后对象的引用相同，那么监听这个对象的useEffect就不会触发。

这意味着如果newActions = ...您使用导致操作的引用来更新操作的值，然后 setActions() 对象的引用保持不变，那么您应该尝试制作操作的副本，然后修改这个独立的副本。然后您可以 setActions(modifiedCopy) 这通常会触发 useEffect。

注意：这只是一个猜测，因为我不知道你把什么放在后面newActions = ...

推荐阅读