反应：组件状态在从 cookie 加载时未更新

Question

我有一个带有按钮的 React 应用程序，该按钮带有一个 toogle，这个开关允许显示或隐藏页面中的一些视图，因此如果用户点击 toogle 按钮，它将看到一个视图（Toggle ON View）或另一个（关闭视图）。我必须将此切换的值存储在 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);
    return (
      <div>
        {this.toggleTableModeButtons()}
        <h1>
        {
          toogle ? "Toggle ON (View 1)" : "Toggle OFF (View 2)"
        }
        </h1>
      </div>
    );
  }
}

export default withCookies(App);

我需要知道我在这个例子中做错了什么。非常感谢任何帮助。

Answer 1

您的 cookie 返回给您的字符串不是布尔值，您可以尝试如下更改您的控制台日志，这将打印 "string"，当状态正在使用 cookie 值更新时。你的条件toogle？如果 toogle 中有内容，将始终 return 为真，当您从 cookie 设置 toogle 时就是这种情况。

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

使用 JSON 解析您的 cookie 值，如下所示，这样它就可以工作了。

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

反应：组件状态在从 cookie 加载时未更新

REACT: Component state isn't being updated when it's loaded from a cookie

javascript

cookies

typescript

reactjs

react-cookie