Так что это странная ошибка. Что я пытаюсь сделать в моем приложении Next.js, так это консоль содержимого журнала вызова API, чтобы увидеть, что я получаю. Эта функция API просто проверяет, вошел ли пользователь в систему, и если да, то я визуализирую определенный участок кода. Из моего файла действий auth.js, который получает файл cookie, содержащий информацию о пользователе, вошедшем в систему, из локального хранилища:

export const isAuth = () => {
if (process.browser) {
    const cookieChecked = getCookie('token');
    if (cookieChecked) {
        if (localStorage.getItem('user')) {
            return JSON.parse(localStorage.getItem('user'));
        } else {
            return false;
        }
    }
}

};

В папке с моими страницами у меня есть файл [username].js, где сейчас я просто пытаюсь записать определенную информацию о пользователе, в данном случае имя пользователя:

{ isAuth().username ? console.log(isAuth().username)  : "" }

Я даже проверяю, настроен ли он, но даже тогда получаю TypeError: Cannot read property 'username' of undefined

Однако, если я просто зарегистрирую весь пользовательский объект { isAuth() ? console.log(isAuth()) : "" }, он консольные журналы в порядке. Вот что возвращается:

{
"_id": "5f7a39ab7acc30a29c5280df",
"username": "dylancougar",
"name": "Dylan Cougar",
"role": 2}

Таким образом, вся информация есть, однако, когда я пытаюсь изолировать какую-либо информацию в объекте, я получаю сообщение об ошибке. Еще более странным бывает время от времени, если оскорбительный битовый код закомментирован, а я раскомментирую его и сохраняю, иногда он действительно работает, однако, если я перезагружу страницу, ошибка вернется. Я не эксперт по Next.js, поэтому, возможно, есть что-то очевидное, что я упускаю из виду.

0
Jinjoe 27 Ноя 2021 в 06:11
Может быть момент, когда ваша страница изначально загружается, когда isAuth() возвращает значение undefined из-за того, что process.browser принимает значение false. Когда это произойдет, вы получите сообщение об ошибке. Перед обращением к свойству попробуйте сделать что-нибудь вроде { isAuth() && isAuth().username ? console.log(isAuth().username) : "" }, чтобы убедиться, что он не является неопределенным.
 – 
deafening_roar
27 Ноя 2021 в 06:17

1 ответ

Лучший ответ

Проблема здесь в том, что next.js сначала отображает ваши данные на сервере, а process.browser на сервере не определен. Так что сделайте следующее:

  export const isAuth = () => {
  let user = false
  if (process.browser) {
    const cookieChecked = getCookie('token');
    if (cookieChecked) {
      if (localStorage.getItem('user')) {
        user = JSON.parse(localStorage.getItem('user'));
        return user;
      } 
    } 
  }
  return user;

Это должно сработать.

1
Pranta 27 Ноя 2021 в 06:21