React Hook useEffect有一个缺少的依赖项: 'dispatch'

11 浏览
0 Comments

React Hook useEffect有一个缺少的依赖项: 'dispatch'

这是我第一次使用React.js进行开发，我试图在离开这个视图时移除警告，因为我不想在其他视图中显示它，但是如果没有错误的话，我想保留成功警告，以便在重定向到其他视图时显示它。但是我在Google Chrome上收到了以下警告：

第97行，第6列：React Hook useEffect缺少依赖项：'dispatch'。请包含它或者删除依赖项数组react-hooks/exhaustive-deps

如果我包含了dispatch，就会导致无限循环。

const [state, dispatch] = useUserStore();
useEffect(() => {
    let token = params.params.token;
    checktoken(token, dispatch);
  }, [params.params.token]);
  useEffect(() => {
    return () => {
      if (state.alert.msg === "Error") {
        dispatch({
          type: REMOVE_ALERT
        });
      }
    };
  }, [state.alert.msg]);
//来自API的响应
if (!token_valide || token_valide_message === "done") {
      return ;
    }

这是useUserStore：

  const globalReducers = useCombinedReducers({
    alert: useReducer(alertReducer, alertInitState),
    auth: useReducer(authReducer, authInitState),
    register: useReducer(registerReducer, registerInitState),
    token: useReducer(passeditReducer, tokenvalidationInitState)
  });
  return (
    {children}
  );
};
export const useUserStore = () => useContext(appStore);

0

2 答案

0 Comments

React Hook useEffect has a missing dependency: 'dispatch'这个问题的出现的原因是因为在useEffect的依赖数组中缺少了dispatch。解决这个问题的方法是将dispatch添加到依赖数组中。下面是解决这个问题的示例代码：

const [foo, dispatch] = myCustomHook()
const stableDispatch = useCallback(dispatch, []) //assuming that it doesn't need to change
useEffect(() =>{
    stableDispatch(foo)
},[stableDispatch])

另外，还可以使用useCallback和useMemo这两个辅助hook来添加额外的依赖检查，以确保同步性。一般来说，我们使用useCallback来确保一个prop的稳定签名，因为我们知道它的变化方式，而React并不知道。下面是一个使用useCallback的示例代码：

const Component = ({ setParentState }) =>{
   const stableSetter = useCallback(() => setParentState(), [])
   useEffect(() => setParentState('mounted'), [stableSetter])
}

通过使用useCallback，我们告诉React，stableSetter的签名不会在组件的生命周期内发生变化，因此effect不需要不必要地运行。

总结一下，React Hook useEffect has a missing dependency: 'dispatch'问题的解决方法是将缺少的依赖添加到依赖数组中，或者使用useCallback来确保依赖的稳定签名。同时，useCallback也可以用来优化昂贵的函数调用。使用这些方法可以避免出现React的依赖警告。

0
0 Comments

React Hook useEffect has a missing dependency: 'dispatch'是一个常见的React Hook使用中的警告。这个警告的原因是在useEffect的依赖数组中没有包含dispatch这个依赖项，而实际上在useEffect中使用了dispatch。这可能会导致一些问题，例如当dispatch发生变化时，useEffect可能不会重新触发。

解决这个问题的方法是将dispatch添加到useEffect的依赖数组中，以确保当dispatch发生变化时，useEffect会重新触发。具体的代码修改如下：

React.useEffect(() => {
  // do something
}, [dispatch]);

在上面的代码中，将dispatch添加到了useEffect的依赖数组中，这样当dispatch发生变化时，useEffect会重新触发。

另外，还可以使用eslint-plugin-react-hooks插件来自动检测并解决这个问题。这个插件可以在代码编译过程中检测到类似的问题，并给出警告或错误提示。可以通过以下步骤来安装和配置这个插件：

1. 安装eslint-plugin-react-hooks插件：

npm install eslint-plugin-react-hooks --save-dev

2. 在.eslintrc配置文件中添加插件和规则：

{
  "plugins": [
    "react-hooks"
  ],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

通过以上配置，eslint-plugin-react-hooks插件会检测到类似的问题，并给出相应的警告或错误提示，帮助我们解决这个问题。

总结起来，React Hook useEffect has a missing dependency: 'dispatch'是一个常见的React Hook使用中的警告，它的原因是在useEffect的依赖数组中没有包含dispatch这个依赖项。为了解决这个问题，我们需要将dispatch添加到useEffect的依赖数组中，或者使用eslint-plugin-react-hooks插件来自动检测和解决这个问题。

0