如何在 UseEffect 内部重定向答案

【问题标题】：How to redirect inside UseEffect如何在 UseEffect 内部重定向
【发布时间】：2022-09-30 16:01:05
【问题描述】：

我试图使用导航而不是 useHistory。但它总是向我展示 React Hook useEffect 缺少依赖项：\'navigate\' 和 \'setUser\'。包括它们或删除依赖数组

使用效果（（）=> {

    auth.onAuthStateChanged(async (user) => {
        if(user) {
             setUser(user);
             navigate(\'/home\');
        }
        
    })
}, [userName,setUser, navigate]);

const handleAuth = () => {
    auth.signInWithPopup(provider).then((result) => {
        setUser(result.user);
    }).catch((error) => {
        alert(error.message);
    })
}

const setUser = (user) => (
    dispatch(setUserLoginDetails({
        name: user.displayName,
        email: user.email,
        photo: user.photoURL,
    }))
)

代码沙箱链接：https://codesandbox.io/s/misty-morning-1h37q6?file=/src/countdown.jsx

如果您检查元素并检查日志，您将看到它正在后台运行。

任何帮助将不胜感激。

标签： reactjs

【解决方案1】：

How to fix missing dependency warning when using useEffect React Hook 解释得更好。

您还应该在useEffect 的末尾返回一个清理函数

【讨论】：

【解决方案2】：

按照惯例，您必须将您在 useEffect 中使用的所有内容作为依赖项包含在内，因此如果任何依赖项发生更改，它将触发重新渲染。在您的情况下，您正在使用 setUser 并导航

setUser(user);
navigate('/home');

因此，为了避免警告将它们添加到依赖数组中，并且由于导航函数是由 react 定义的，因此无论组件重新渲染多少次，它们的地址都不会改变，但是由于 setUser 是由您定义的，因此必须将其包装使用 useCallback 以便每次组件重新渲染时都不会重新定义函数并触发 useEffect。

所以也改变你的代码，

const setUser = useCallback( (user) => (
    dispatch(setUserLoginDetails({
        name: user.displayName,
        email: user.email,
        photo: user.photoURL,
    }))
), [])
auth.onAuthStateChanged((user) => {
        if(user) {
             setUser(user);
             navigate('/home');
        }
        
    })
}, [userName, setUser, navigate]);

而且你永远不应该将你的回调函数声明为异步，因为如果你这样做，你将无法返回一个清理函数

所以如果你的 useEffect 代码看起来像这样

useEffect(() => {
  const user = async () => {}

  user.then().catch() // if you want to change the state or show error message

  return () => {} // you can also return a cleanup function if you are using timeout or intervals and want to clear the previous timeout or intervals
}, [dependencies])

【讨论】：

我试着像你写的那样做，但它显示错误 setUser' 在定义我上面的整个代码之前被使用。
@SmitaMahata 将 useEffect 放在您定义 setUser() 的位置下方
将 setUser 代码移至 useEffect 上方或将 useEffect 代码移至 setUser 下方
我已经完成了所有这些事情。任何其他重定向功能或技巧，如果您能想到的话。'setUser' 功能使 useEffect Hook（第 45 行）的依赖关系在每次渲染时都发生变化。要解决此问题，请将“setUser”的定义包装在其自己的 useCallback() Hook 中。如果我设置 usecallback 它显示调度错误。
它是否表明您必须将调度添加为依赖项或什么？