useEffect 与 Context API 的依赖关系。我的代码适用于空数组但仍然发出警告

Question

所以。我从 context 作为 initialState 获取客户端，下面的代码来自我的列表组件（listClients.js 或 smth）。我使用从 firebase 获取的数据更新上下文。使用空数组作为依赖项，一切正常。我在列表组件中列出了我的最终数组。但是 eslint 仍然说我应该将“clientsRef”和“updateClients”添加到依赖项中，但这会导致无限循环。那我该怎么办呢？对这个警告闭上眼睛？

const { clients, removeClient, updateClients } = useContext(ClientsContext);
const collection = 'clients';
const clientsRef = firestore.collection('clients').orderBy('createdAt', 'desc');


useEffect(() => {

    const unsubscribeFromSnapshot = clientsRef.onSnapshot(async snapshot => {
        const clientsMap = convertSnapshotToMap(snapshot);
        updateClients(clientsMap);     

    });

    return () => {
        unsubscribeFromSnapshot();
    }
}, []);

Answer 1

您可以在 useEffect 中声明 clientsRef，对于 updateCloients 函数，您可以在 ContextProvider 中使用useCallback。完成后，您可以将它们作为依赖项添加到 useEffect

const { clients, removeClient, updateClients } = useContext(ClientsContext);



useEffect(() => {
    const collection = 'clients';
     const clientsRef = firestore.collection('clients').orderBy('createdAt', 'desc');
    const unsubscribeFromSnapshot = clientsRef.onSnapshot(async snapshot => {
        const clientsMap = convertSnapshotToMap(snapshot);
        updateClients(clientsMap);     

    });

    return () => {
        unsubscribeFromSnapshot();
    }
}, []);

---

在 ClientContext 提供者中

const updateClients = useCallback(() => {
   // logic here
}, []);

但是，如果您确定只希望 useEffect 中的逻辑运行一次而不是稍后运行，您可以使用

禁用警告

// eslint-disable-next-line react-hooks/exhaustive-deps

例如：

useEffect(() => {

    const unsubscribeFromSnapshot = clientsRef.onSnapshot(async snapshot => {
        const clientsMap = convertSnapshotToMap(snapshot);
        updateClients(clientsMap);     

    });

    return () => {
        unsubscribeFromSnapshot();
    }
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

更多详情请查看此帖：

How to fix missing dependency warning when using useEffect React Hook?