чтобы обновить данные, необходимые для перезагрузки страницы, как я могу избежать этого? - PullRequest
Новая
       11

чтобы обновить данные, необходимые для перезагрузки страницы, как я могу избежать этого?

0 голосов
/ 21 января 2019

У меня есть приложение, которое сохраняет пользователя в localStorage, у меня есть проверки на наличие пользователя в localStorage 

componentDidMount(): void {
    const {getNotes,} = this.props;
    const userDataJSON = localStorage.getItem('userData'); 

    if (userDataJSON) {
      const {userID, sessionID,} = JSON.parse(userDataJSON);
      return getNotes({sessionID, userID,});
    }
}

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

const userDataJSON = localStorage.getItem('userData');

export const userID = userDataJSON ? JSON.parse(userDataJSON).userID : null;
export const sessionID = userDataJSON ? JSON.parse(userDataJSON).sessionID : null;
export const username = userDataJSON ? JSON.parse(userDataJSON).username : '';

но данные не обновляются, когда я выхожу из системы и захожу в один сеанс, мне нужно перезагрузить страницу, чтобы исправить работу, как обновить переменные без перезагрузки страницы?когда я не пользуюсь утилями, все хорошо работает.

1 Ответ

0 голосов
/ 22 января 2019

Происходит то, что код, который вы экспортируете в утилитах, выполняется только один раз (при начальной загрузке), потому что вы сохраняете значение только в этот момент, вы можете изменить эти функции на такие: 

export const getUserData = () => {
  const data = localStorage.getItem('userData');
  return JSON.parse(data);
};

И тогда, когда вы его используете, оно будет получать текущее значение каждый раз 

const {userID, sessionID, username} = getUserData();

Еще один способ избежать проверки локального хранилища каждый раз, когда вам нужно это значение, может состоять в обновлении значения на вашемсостояние после изменения и перенос из локального хранилища при первоначальном монтировании, например: 

constructor(props) {
  super(props);
  this.state = getUserData();
}
updateUsername(username) {
  this.setState({ username });
  setUserData({ username }); // Assuming this one
}
...