React中useEffect从Firestore取数据触发无限循环问题咨询

问题原因 #

你的代码里useEffect的依赖数组包含了clients，每次调用setClients更新状态后，clients的引用会发生变化，触发useEffect重新执行，再次请求数据并更新状态，最终形成无限循环。

1. 快速修复无限循环 #

将useEffect的依赖数组改为空数组[]，让数据仅在组件挂载时获取一次：

export const DataContext = createContext();

const DataProvider = ({ children }) => {
    const [clients, setClients] = useState([]);


    useEffect(() => {
        const fetchData = async () => {
            try {
                const q = query(
                    collection(db, "xyzCollection"),
                    where("Status", "==", "Active")
                );
                const querySnapshot = await getDocs(q);
                let list = [];
                querySnapshot.forEach((doc) => {
                    list.push({ id: doc.id, ...doc.data() });
                });
                setClients(list);
            } catch (err) {
                console.log("could not fetch clients", err);
            }
        };
        fetchData();
    }, []); // 移除clients依赖，改为空数组

    const dataInfo = {
        clients,
    };
    return (
        <DataContext.Provider value={dataInfo}>{children}</DataContext.Provider>
    );
};
export default DataProvider;

2. 更优的实时数据同步方案 #

如果需要实时监听Firestore数据变化（数据更新时自动同步到组件），推荐使用Firestore的onSnapshot方法替代getDocs，既避免手动重复请求，又能实时获取最新数据：

export const DataContext = createContext();

const DataProvider = ({ children }) => {
    const [clients, setClients] = useState([]);


    useEffect(() => {
        const q = query(
            collection(db, "xyzCollection"),
            where("Status", "==", "Active")
        );
        
        // 建立实时监听
        const unsubscribe = onSnapshot(q, (querySnapshot) => {
            let list = [];
            querySnapshot.forEach((doc) => {
                list.push({ id: doc.id, ...doc.data() });
            });
            setClients(list);
        }, (err) => {
            console.log("could not listen to clients", err);
        });

        // 组件卸载时取消监听，避免内存泄漏
        return () => unsubscribe();
    }, []); // 空依赖，仅在挂载时建立监听

    const dataInfo = {
        clients,
    };
    return (
        <DataContext.Provider value={dataInfo}>{children}</DataContext.Provider>
    );
};
export default DataProvider;

额外优化建议 #

• 可以在dataInfo中添加手动刷新方法，比如refreshClients，用于主动触发数据更新。
• 新增isLoading状态变量，在数据请求前后切换状态，提升用户体验。

内容的提问来源于stack exchange，提问作者Harsh Singh