LocalStorage для React Экран входа в систему с reCaptcha - PullRequest
Новая
       5

LocalStorage для React Экран входа в систему с reCaptcha

0 голосов
/ 08 ноября 2018

Привет всем, я пытаюсь использовать localStorage, когда пользователь пытается войти в мой веб-сайт, если он / она пытается более 2 раз, reCaptcha появляется, только если это флажок в reCaptcha, но если пользователь обновляет страницу, reCaptcha пропал из-за моего состояния попыткиNumber. Я хочу сохранить попыткуNumber в localStorage и использовать сначала localStorage, если пользователь пытается более 2, при обновлении страницы reCaptche должен быть там.

Я пытался так, но это не работает. Если вы мне поможете, я буду очень благодарен за это. Всем спасибо . 

 this.state = {
      email: '',
      password: '',
      load: false,
      attempCount: 0,
    };

 handleLogin(e) {
    const {
      email, password, recaptcha,
    } = this.state;

    const cachedHits = localStorage.getItem(this.state.attempCount);

    if (cachedHits) {
      this.setState({ attempCount: JSON.parse(cachedHits) });
      return;
    }
    this.setState({ attempCount: this.state.attempCount + 1 });
    e.preventDefault();
    e.stopPropagation();
    this.props.doSignIn({ email, password, recaptcha });
    return false;
  }

Ответы [ 3 ]

0 голосов
/ 08 ноября 2018

Полагаю, вы пытаетесь получить значение под ключом 0, если взгляните на документацию здесь . Попробуйте сохранить его под ключом, который вы сейчас используете, как localStorage.setItem('attempts', this.state.attempCount), а затем localStorage.getItem('attempts').

Когда вы делаете getItem, я полагаю, он вернет string, поэтому выполните синтаксический анализ parseInt(localStorage.getItem('attempts'), 10), прежде чем использовать его для какой-либо операции.

Есть две проблемы с кодом:

  1. значение никогда не устанавливается в локальном хранилище.

  2. Первый раз, когда вызывается handleLogin, под строкой const cachedHits = localStorage.getItem (0); он пытается извлечь значение для нуля, который никогда не сохраняется в локальном хранилище, и возвращает ноль (т.е. cachedHits = ноль), затем он пропускает часть if и устанавливает значение tryCount в состояние 1 и отображает капчу. в следующий раз, когда вызывается handleLogin, const cachedHits = localStorage.getItem (1); которого опять нет в кеше и cachedHits = null и так далее ... поэтому вам нужно установить значение в localStorage для некоторого ключа, например, и в getItem использовать этот ключ

0 голосов
/ 08 ноября 2018

хорошо, код, который вы добавили, не показывает, как и где вы устанавливаете значение в localStorage.

Я предполагаю, что вы обновите localstorage в событии нажатия кнопки входа в систему что-то вроде этого 

localStorage.setItem('clickCount', this.state.attempCount );

при условии, что ваш this.state.attempCount увеличивается на 1 при нажатии

Теперь, чтобы получить его значение, используйте 

let count = localStorage.getItem('clickCount');

if(count > 2){
  // show Captcha
}
0 голосов
/ 08 ноября 2018

Не видя ваш код doSignIn, трудно сказать, что происходит с вашим localStorage, но ваш вызов localStorage в вставленном вами коде передает ваш попыткуCount в качестве ключа. Вы должны использовать строку в качестве ключа, например «tryupount», а не ключ, который будет меняться при изменении вашего состояния.

Возможно, это не вся ваша проблема, но это то, что я заметил до сих пор.

...