Ошибка в реакции: визуализировано больше хуков, чем во время предыдущего рендера - PullRequest
0 голосов
/ 01 апреля 2020

Я получаю сообщение об ошибке: обработано больше хуков, чем во время предыдущего рендеринга. Я проверил другие посты, в которых рассматриваются условные выражения с перехватчиками реакции, но я не могу диагностировать аналогичную проблему в своем коде. Если я закомментирую часть кода Object.keys в задачах. js, ошибка не отобразится, но если я оставлю ее, я получу ошибку. Я полагаю, что это вызвано ошибкой в ​​файле keepsessionutils. 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

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
}

Ответы [ 2 ]

0 голосов
/ 01 апреля 2020

Пока ваши valid_playlists изменяются, вы будете вызывать больше хуков на линии, поэтому, когда ваш список изменится, изменится время, когда вы вызываете хуки.

React запоминает вызываемые хуки и порядок.

Попробуйте немного изменить свой подход. - Имя useMyHook для любой некомпонентной функции, использующей хуки. - Не вызывать функцию для создания слушателей onClick={doSomething()} - Не использовать перехватчики внутри обработчиков createChallengeUtil вызывает перехватчики

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

Я надеюсь, что этот подход хорошо для вас.

0 голосов
/ 01 апреля 2020

Вам нужно ознакомиться с Правилами React Hooks .

Будет лучше применить другой подход. Кроме того, как я вижу, вы вызываете KeepSession на каждой итерации карты, но вы не используете playlist_id для генерации другого хука, поэтому в итоге создается куча хуков с одинаковым именем.

Также, в конце концов, какова цель создания этих хуков внутри вашей функции, если вы ими не пользуетесь, и не возвращает ссылку на них из KeepSession ()?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...