使用 redux useDispatch 时 useEffect 缺少依赖项答案

【问题标题】：useEffect missing dependency when using redux useDispatch使用 redux useDispatch 时 useEffect 缺少依赖项
【发布时间】：2020-04-08 13:51:41
【问题描述】：

每当我的组件使用 react hooks useEffect 挂载时，我想获取我的类别，而不是在每次重新渲染时。但我不断收到此警告React Hook useEffect has a missing dependency:'dispatch'。

这是我的代码：

const categories = useSelector(state => state.category.categories);
const dispatch = useDispatch();

useEffect(() => {
    console.log('effecting');
    const fetchCategories = async () => {
       console.log('fetching');
       try {
            const response = await axios.get('/api/v1/categories');
            dispatch(initCategory(response.data.data.categories));
       } catch (e) {
           console.log(e);
       }
    }

    fetchCategories();
}, []);

【问题讨论】：

标签： reactjs redux react-redux react-hooks

【解决方案1】：

将dispatch 添加到您的依赖项数组（当前为空）。

useEffect(() => {
    console.log('effecting');
    const fetchCategories = async () => {
       console.log('fetching');
       try {
            const response = await axios.get('/api/v1/categories');
            dispatch(initCategory(response.data.data.categories));
       } catch (e) {
           console.log(e);
       }
    }

    fetchCategories();
}, [dispatch]);

【讨论】：

这行得通，但是在我的依赖数组上添加一个函数有什么意义呢？
所以useDispatch 将从 Redux 存储中返回对调度函数的引用，该引用可能会更改，因此您应该将其添加到依赖数组中，以确保您始终引用正确的函数。
redux store 中的函数会如何变化？是不是 redux 的 state 改变了而不是 dispatch 的 function ？
@boosted_duck 我真的有同样的问题。如何更改“调度”参考？为什么我们必须把它放在依赖列表中？使用 useReducer 时我们不必这样做。
我认为这是因为 React 的 eslint 只允许在效果中使用一些东西而不是在依赖数组中：useRef、setState 和从 useReducer 分派。为什么？因为它知道这些是永远不会重新分配的核心变量。如果您愿意，可以使用 useRef 来解决此错误。这很烦人，但这是目前最好的解决方案。

【解决方案2】：

这可能是被忽略的承诺的问题。

fetchCategories() returns a promise.

你可以试试

useEffect(() => {
    const fetchCategories = async () => {
       try {
            const response = await axios.get('/api/v1/categories');
            await dispatch(initCategory(response.data.data.categories));
       } catch (e) {
           console.log(e);
       }
    }

    fetchCategories().then(res => (console.log(res());
}, []);

【讨论】：

【解决方案3】：

您可以安全地将调度函数添加到 useEffect 依赖数组。如果您查看 react-redux 文档，特别是 hooks 部分，他们会提到这个“问题”。

dispatch 函数引用会稳定只要相同 store 实例正在传递给 .正常情况下，那家店应用程序中的实例永远不会改变。

然而，React hooks lint 规则并不知道 dispatch 应该是稳定的，并且会警告应该将调度变量添加到 useEffect 和 useCallback 的依赖数组。最简单的解决方案就是这样做：

export const Todos() = () => {
const dispatch = useDispatch();

useEffect(() => {
    dispatch(fetchTodos())
  // Safe to add dispatch to the dependencies array
  }, [dispatch])

}

【讨论】：