小编jac*_*ill的帖子

我正在尝试从 Firebase 获取数据，然后将其推送到我的状态。目标是创建一种机制，每次 Firebase 中的数据更改时都会执行此操作。

我将on()方法与useEffect(). 不幸的是，即使状态发生变化，React 也不会重新渲染我的组件。（忽略直接引用，仅供测试）

const [tasks, setTasks] = useState([]);

    useEffect(() => {
        const fetchedTasks = [];
        const ref = props.firebase.db.ref('users/1zfRCHmD4MVjJj7L884LL4TMwAH3');
        const listener = ref.on('value', snapshot => {
            snapshot.forEach(childSnapshot => {
                const key = childSnapshot.key;
                const data = childSnapshot.val();
                fetchedTasks.push({ id: key, ...data });
            });
            setTasks(fetchedTasks);
        });
        return () => ref.off('value', listener);
    }, []);

此时，当我在 Firebase 控制台中手动更改我的数据时，我可以在我的开发工具中看到它触发了侦听器，数据被获取，但它与之前的状态（任务）合并。

我当然希望它取代以前的状态。其次，组件不会重新渲染。我知道空依赖列表负责（“[]”）并且组件只安装一次，但是当我删除列表时，组件正在更新并迅速冻结我的浏览器。我也尝试过"[tasks]"，结果是相似的 - 组件一遍又一遍地重新渲染。Firebase 由上下文提供，ESLint 显示：

“React Hook useEffect 缺少依赖项：'props.firebase.db'。要么包含它，要么删除依赖项数组。”

当我这样做时，它仍然无法正常工作并且组件没有更新。