React Hook useEffect 缺少依赖项要么包含它们，要么删除依赖数组 react-hooks/exhaustive-deps答案

【问题标题】：React Hook useEffect has missing dependencies Either include them or remove the dependency array react-hooks/exhaustive-depsReact Hook useEffect 缺少依赖项要么包含它们，要么删除依赖数组 react-hooks/exhaustive-deps
【发布时间】：2021-10-21 06:41:55
【问题描述】：

我在控制台上有此警报：

React Hook useEffect 缺少依赖项：“clearClient”、“clearProductEdit”、“clearProducts”、“client”、“productEdit”和“rows”。要么包含它们，要么移除依赖数组 react-hooks/exhaustive-deps

clearClient、ClearProducts 和 clearProductsEdit 是类似的函数，它们返回我的 reducer 的初始值

该功能正常工作，但是我想解决此警报，我是否错误地使用了 useEffect？我该如何解决这个问题？

我的使用效果：

useEffect(() => {
        return () => {
            clearClient(client)
            clearProducts(rows)
            clearProductEdit(productEdit)
        }
    }, [])

我的 clearClient 函数：

  function clearClient(c) {
        dispatch({
            type: 'CLEAR_CLIENT',
            payload: { row: c },
        })
    }

在我的 reducer 上，initialState 是：

const initialState = {
    client: {
        name: '',
        id: '',
        dateBirth: '',
        cpf: '',
        address: {
            street: '',
            number: '',
            district: '',
            city: '',
            cep: '',
            uf: '',
            complement:'',
            phone: '',
        },
    },
}

还有CLEAR_CLIENT的情况：

 case 'CLEAR_CLIENT':
            return {
                ...state,
                client: {
                    name: '',
                    id: '',
                    dateBirth: '',
                    cpf: '',
                    address: {
                        street: '',
                        number: '',
                        district: '',
                        city: '',
                        cep: '',
                        uf: '',
                        complement:'',
                        phone: '',
                    },
                },
            }

【问题讨论】：

这能回答你的问题吗？ How to fix missing dependency warning when using useEffect React Hook
不，它没有，发送给我的问题是关于 fetch，我正在使用 react-redux useDispatch hook
@lawrence-witt 您发送的问题是将 fetch 包装在使用效果中，这在此处演示的情况下很好，但是这里我们有一个钩子，您不能使用 useDispatch（我假设 OP 是使用它）内部功能，只有组件，我给出的解决方案比您发送的链接更好地回答了问题
是的，我正在使用 react-redux 的 useDispatch

标签： reactjs react-redux

【解决方案1】：

我建议你在 React 组件之外使用 store 变量，像这样


    useEffect(() => {
        return () => {
            store.dispatch({
                type: 'CLEAR_CLIENT'
            })

            store.dispatch({
                type: 'CLEAR_PRODUCTS'
            })

            store.dispatch({
                type: 'CLEAR_PRODUCTS_EDIT'
            })
        }
    }, [])

当您清理商店时，您不需要发送有效负载，请随意将类型命名更改为您在代码中使用的名称。

【讨论】：

不知道 useEffect 中的钩子导致了此警报，您的解决方案有效，谢谢！