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);
    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中存在某些内容，它将始终返回true，这是从cookie设置toogle时的情况。

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

按如下所示使用JSON解析您的cookie值，这样它将起作用。

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

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

1 个答案: