Javascript React JS：呈现的钩子比预期的少。这可能是由意外的提前返回语句引起的

我正在尝试对React JS项目进行身份验证，但出现以下错误：

渲染的钩子比预期的少。这可能是由意外的提前返回语句引起的

我在读其他问题，比如和，但我想我的情况是不同的，因为我在组件创建后设置了所有的useState

我使用了不同的方法来完成这项工作，但它们都不适合我

我在ContextWrapper组件中添加了如下方法：

从React导入React，{useState，useffect}； 从react cookie导入{useCookies}； 从jsonwebtoken导入jwt； 从../fake服务器导入{fetchLogin，fetchVerify}； 从导入上下文。/Context； 导出默认值{children}=>{ const[token，setToken]=useStatenull； const[message，setMessage]=useStatenull； const[loading，setLoading]=useStatefalse； const[cookies，setCookie，removeCookie]=使用cookies[token]； useEffect=>{ console.logcookies； 如果是cookies.token{ setTokencookies.token； } }, []; useEffect=>{ 如果令牌{ setCookietoken，JSON.stringifytoken，{path://}； }否则{ removeCookietoken； } console.logtoken； }，[代币]； 函数loginemail，密码{ fetchLoginemail，密码 /*.thenresponse=>response.json*/ .thendata=>{ const decoded=jwt.decodedata.token； 常量令牌={ token:data.token， …解码 }; setTokentoken； } .catcherror=>{ console.logerror，error； 设置消息{ 现状：500， 文本：错误 }; }; } 功能验证{ fetchVerifycookies.token /*.thenresponse=>response.json*/ .thendata=>{ setTokendata； } .catcherror=>{ setTokennull； 设置消息{ 现状：500， 文本：错误 }; }; } 功能注销{ setTokenfalse； } 常量值={ 登录， 验证 注销， 代币 消息 设置消息， 加载， 设置加载 }; 返回{children}； }; 这是我的登录组件：

从React导入React，{useState，useContext，useEffect}； 进口{ 网格 卡片 排版， 卡片行动， 卡片内容， FormControl， TextField， 按钮 }来自@material ui/core； 从路由器dom导入{Redirect}； 从@material ui/core/styles导入{makeStyles}； 从../Context/Context导入上下文； const useStyles=makestylesTime=>{ 根目录：{ 高度：100vh， 显示：flex， 内容：中心， 内容：中心 }, 标题：{ marginBottom:theme.spacing2 }, 卡片：{}， 表单控制：{ marginBottom:theme.spacing1 }, 行动：{ 显示：flex， 内容：柔性端 } }; 导出默认值{history，location}=>{ const context=useContextContext； 常量类=使用样式； const[email，setEmail]=useState； const[password，setPassword]=useState； if context.token{ 回来 } useEffect=>{ context.setLoadingfalse； }, []; 子对象上的函数{ e、 防止违约； context.loginemail，密码； } 回来 登录 setEmaile.target.value} /> setPassworde.target.value} /> 登录 ; };

---

在这里，我创建了一个函数来重现在触发登录方法时发生的错误。那么，我做错了什么呢？

控制台中的错误会准确地告诉您问题所在。不能有条件地创建挂钩。这个钩子是个问题，需要出现在return语句之前。这可能意味着您应该更改加载条件以按预期工作

useEffect(() => {
    context.setLoading(false);
}, []);

---

控制台中的错误会准确地告诉您问题所在。不能有条件地创建挂钩。这个钩子是个问题，需要出现在return语句之前。这可能意味着您应该更改加载条件以按预期工作

useEffect(() => {
    context.setLoading(false);
}, []);

---

在使用效果下移动您的条件

useEffect=>{} if context.token{ 回来 }

---

在使用效果下移动您的条件

useEffect=>{} if context.token{ 回来 }

---

将重定向逻辑移到挂钩之后

useEffect(() => {
    context.setLoading(false);
  }, []);

  if (context.token) {
    return <Redirect to="/" />;
  }

如果userIsValid不为true，则在主组件中重定向用户。而且这个字段总是未定义的，因为它没有在上下文中定义。在上下文中添加此字段，然后重试

---

希望这能解决问题。

将重定向逻辑移到挂钩之后

useEffect(() => {
    context.setLoading(false);
  }, []);

  if (context.token) {
    return <Redirect to="/" />;
  }

如果userIsValid不为true，则在主组件中重定向用户。而且这个字段总是未定义的，因为它没有在上下文中定义。在上下文中添加此字段 试试看

---

希望这能解决问题。

退货；登录前的useEffect是个问题；在登录中的useEffect之前是一个问题。我在哪里有条件地创建一个钩子？从我的注释中可以看到带有return-before-hook的if语句。这意味着只有在if条件context.token为true之后才会创建钩子。我在哪里有条件地创建钩子？我的注释中有if语句，在钩子之前返回。这意味着只有在您的if条件context.token为true之后才会创建钩子。。。也许这是可行的，但现在我得到了最大的更新深度超过。由于无限重加载…@Maramal好吧，这是另一个问题，不是吗？您的主组件在componentcontext的主体中有副作用。请验证，将其移动到useEffect，并重新思考您的架构我想这是另一个问题。。。谢谢你解决了我的第一个问题。@Maramal没问题，答案就在这里，组件体内不会有任何副作用，因此没有网络调用，没有状态更新，请将它们移动到useffect。如果用户不是loggedwell，更好的方法就是不渲染路由。。。也许这是可行的，但现在我得到了最大的更新深度超过。由于无限重加载…@Maramal好吧，这是另一个问题，不是吗？您的主组件在componentcontext的主体中有副作用。请验证，将其移动到useEffect，并重新思考您的架构我想这是另一个问题。。。谢谢你解决了我的第一个问题。@Maramal没问题，答案就在这里，组件体内不会有任何副作用，因此没有网络调用，没有状态更新，请将它们移动到useffect。如果用户没有登录，更好的方法是不渲染路由