Question

我在React中收到错误：渲染的钩子比上一个渲染期间要多。我检查了其他帖子，这些帖子使用带条件挂钩的条件条件解决，但是我无法在代码中诊断出类似的问题。如果我注释掉Challenges.js中代码的Object.keys部分，则不会显示该错误，但是如果将其保留在代码中，则会出现错误。我认为这是由于keepsessionutils.js文件中的错误引起的。请协助。

challenges.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

export default function createChallengeUtil(playlist_id) {
  // Check if there are at least 20 songs
  var token = KeepSession();
  // Populate Firebase with challenge data
}

keepsession.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
}

Answer 1

您需要查看React Hooks rules。

最好采用其他方法。另外，正如我所看到的，您在每次地图迭代时都调用KeepSession，但是没有使用playlist_id生成不同的钩子，因此最终创建了一堆具有相同名称的钩子。

最后，如果不使用它们，也不从KeepSession（）返回对其的引用，那么在函数内部创建这些Hook的目的是什么？

Answer 2

只要您的valid_playlists进行修改，您将在线上调用更多的hook，因此当列表更改时，您将更改调用hook的时间。

React会记住调用的钩子和顺序。

尝试改变您的方法。 -使用挂钩将任何非组件函数的名称命名为useMyHook。 -不要调用函数来创建监听器onClick={doSomething()} -不要在处理程序内部使用钩子createChallengeUtil是在调用钩子

https://codesandbox.io/s/stack-react-hook-60960690-63yf2

我希望这种方法适合您。

React中的错误：渲染的钩子比上一个渲染期间要多

2 个答案: