解决：从Cookie加载组件状态时不会对其进行更新

Question

我有一个带有按钮的React应用程序，该按钮具有一个切换按钮，该切换按钮允许显示或隐藏页面中的某些视图，因此，如果用户单击该切换按钮，它将看到一个视图（切换为“打开”视图）或另一个视图（切换为“关闭”）看法）。我必须将此切换的值存储在cookie中，以确保当用户再次访问该网站时，它会看到最后一次选择的视图（“打开”或“关闭”）。我试图通过使用“ npx create-react-app”从头开始创建新的react应用来以最简单的方式解决此问题。我还包括了npm react-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);export default withCookies(App);我需要知道在此示例中我做错了什么。任何帮助都会很感激。

Answer 1

您的Cookie会给您返回不是布尔值的字符串，您可以尝试如下更改控制台日志，该控制台日志将打印“字符串”，当状态被cookie值更新时。您的情况太过分了吗？如果toogle中存在某些内容，则将始终返回true，这是从cookie设置toogle时的情况。

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

如下使用JSON解析您的cookie值，它将起作用。

this.state = {

  toogle: JSON.parse(cookies.get('toggleMode')) || false

};