[英]Error in React: Rendered more hooks than during the previous render
I am receiving the Error in React: Rendered more hooks than during the previous render.我在 React 中收到错误:比上一次渲染期间渲染了更多的钩子。 I checked other posts ,which addressed using conditionals with react hooks, but I am unable to diagnose a similar problem in my code.我检查了其他帖子,这些帖子解决了使用带有反应钩子的条件,但我无法在我的代码中诊断出类似的问题。 If I comment out the Object.keys portion of the code in challenges.js, the error does not show, but if I leave it in I get the error.如果我在challenges.js 中注释掉代码的Object.keys 部分,错误不会显示,但如果我保留它,我会收到错误。 I believe it is being caused by a bug in the keepsessionutils.js file.我相信它是由 keepsessionutils.js 文件中的错误引起的。 Please assist.请协助。
challenges.js挑战.js
return (
<div className="about">
<div className="about-header">
<div className="about-headerText">
<h2> Dummy Challenge </h2>
<h2> Dummy Challenge </h2>
<h2> Dummy Challenge </h2>
<h2> Dummy Challenge </h2>
<h2> Dummy Challenge </h2>
<hr />
{Object.keys(valid_playlists).map(key => (
<button type="button" onClick={createChallengeUtil(key)}>
{valid_playlists[key]}
</button>
))}
</div>
</div>
</div>
);
}
createChallengeUtil.js createChallengeUtil.js
export default function createChallengeUtil(playlist_id) {
// Check if there are at least 20 songs
var token = KeepSession();
// Populate Firebase with challenge data
}
keepsession.js保持会话.js
export default function KeepSession() {
const [value, setValue] = React.useState(
localStorage.getItem('myValueInLocalStorage') || ''
);
// Here I am just checking to see if we need to retrieve a new token or not.
if (value === "undefined"){
var token = getLocalToken();
}
else{
var token = value;
}
// This block detects if the user refreshes the page and stores the current token if so.
window.onbeforeunload = (e) => {
// I'm about to refresh! do something...
localStorage.setItem('myValueInLocalStorage', token)
setValue(token);
};
return token
}
You need to take a look to React Hooks rules .你需要看看React Hooks 规则。
It will be better to apply another approach.应用另一种方法会更好。 Also, as I can see, you are calling KeepSession on each map iteration, but you are not using playlist_id to generate a different hook, so it ends up creating a bunch of hooks with the same name.此外,正如我所看到的,您在每次地图迭代时都调用了 KeepSession,但您没有使用 playlist_id 来生成不同的挂钩,因此它最终会创建一堆具有相同名称的挂钩。
Also, at the end, what is the purpose of creating these Hooks inside of your function if you are not using them, nor returning a reference to it from KeepSession()?此外,最后,如果您不使用它们,也不从 KeepSession() 返回对它的引用,那么在您的函数内部创建这些 Hook 的目的是什么?
As Long your valid_playlists modifies, you will be calling more hooks on line so when your list changes, will change times you are calling hooks.只要您的 valid_playlists 修改,您将在线调用更多钩子,因此当您的列表更改时,将更改您调用钩子的时间。
React remembers hooks called and the order. React 会记住调用的钩子和顺序。
Try to change a little bit your approach.试着稍微改变一下你的方法。 - Name useMyHook
for any non component function using hooks. - 为任何使用钩子的非组件函数命名useMyHook
。 - Do not call function to create listeners onClick={doSomething()}
- Do not use hook inside handlers createChallengeUtil
is callling hooks - 不要调用函数来创建监听器onClick={doSomething()}
- 不要在处理程序中使用钩子createChallengeUtil
正在调用钩子
https://codesandbox.io/s/stack-react-hook-60960690-63yf2 https://codesandbox.io/s/stack-react-hook-60960690-63yf2
I hope this this approach is fine for you.我希望这种方法适合您。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.