REACT: состояние компонента не обновляется при загрузке из файла cookie - PullRequest
Новая
       11

REACT: состояние компонента не обновляется при загрузке из файла cookie

0 голосов
/ 08 апреля 2019

У меня есть приложение React с кнопкой, которая имеет переключатель, этот переключатель позволяет отображать или скрывать некоторые представления на странице, поэтому, если пользователь нажимает кнопку переключения, он увидит один вид (Toggle ON View) или другой. (Выключить просмотр). Я должен сохранить значение этого переключателя в файле cookie, чтобы при повторном посещении пользователем сайта он видел последнее выбранное представление (Toggle ON или Toggle OFF).

Я попытался решить эту проблему самым простым способом, создав новое приложение реагирования с нуля, используя "npx create-Reaction-app". Я также включил библиотеку npm Reaction-Cookie.

Это прекрасно работает, когда пользователь нажимает кнопку переключения, в cookie устанавливается правильное значение и отображается правильное представление. Однако, если я перезагружаю страницу, она всегда показывает неправильный вид, игнорируя значение, загруженное из cookie. Я не могу объяснить, почему это происходит только при загрузке страницы.

Код Index.js: 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { CookiesProvider } from 'react-cookie';

ReactDOM.render(<CookiesProvider>
                    <App />
                </CookiesProvider>, 
                document.getElementById('root'));

serviceWorker.unregister();

Код App.js: 

import React, { Component } from 'react';
import { instanceOf } from 'prop-types';
import './App.css';
import { withCookies, Cookies } from 'react-cookie';

class App extends Component {
  static propTypes = {
    cookies: instanceOf(Cookies).isRequired
  };

  constructor(props) {
    super(props);
    const { cookies } = props;
    var valueToSet = cookies.get('toggleMode');
    console.log('Toggle Value from Cookie: ' + valueToSet);
    this.state = {
      toogle: cookies.get('toggleMode')
    };
  }

  toggleTableModeButtons = () => {
      return ( 
        <div>
          <button type="button" onClick={this.toggleMode}>Toggle Now!</button>
        </div>
      );
  };

  toggleMode = event => {
    const { cookies } = this.props;
    event.preventDefault();
    var toogleValueToSet = !this.state.toogle;
    this.setState(
      { toogle: toogleValueToSet }
    );
    console.log('Setting Cookie with value: ' + toogleValueToSet);
    cookies.set('toggleMode', toogleValueToSet, { path: '/' });
  }

  render() {
    const { toogle } = this.state;
    console.log('Toggle Value in RENDER: ' + toogle);
    return (
      <div>
        {this.toggleTableModeButtons()}
        <h1>
        {
          toogle ? "Toggle ON (View 1)" : "Toggle OFF (View 2)"
        }
        </h1>
      </div>
    );
  }
}

export default withCookies(App);

Мне нужно знать, что я делаю неправильно в этом примере. Любая помощь будет действительно оценена.

1 Ответ

0 голосов
/ 09 апреля 2019

Ваши файлы cookie возвращают вам строку, а не логическое значение. Вы можете попробовать изменить журнал консоли, как показано ниже, который будет печатать «строку», когда состояние обновляется значением cookie. Ваше состояние toogle? всегда возвращает true, если в toogle есть что-то, что имеет место, когда вы устанавливаете toogle из файлов cookie. 

console.log('Toggle Value in RENDER: ' + typeof toogle);

Проанализируйте значение cookie с помощью JSON, как показано ниже, чтобы оно работало. 

this.state = {
  toogle: JSON.parse(cookies.get('toggleMode')) || false
};
...