0

我有一个带有一个按钮的 React 应用程序，该按钮具有一个工具，此切换允许显示或隐藏页面中的一些视图，因此如果用户点击工具按钮，它将看到一个视图 (Toggle ON View) 或另一个 (Toggle OFF看法）。我必须将此切换的值存储在 cookie 中，以确保当用户再次访问该站点时，它将看到选择的最后一个视图（切换打开或切换关闭）。

我试图通过使用“npx create-react-app”从头开始创建一个新的反应应用程序，以最简单的方式解决这个问题。我还包含了 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);

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

4

1 回答 1

0

您的 cookie 为您返回字符串而不是布尔值，您可以尝试更改控制台日志，如下所示，当状态使用 cookie 值更新时将打印“字符串”。你的条件太高了？如果toogle 中有东西，总是会返回true，当你从cookies 中设置toogle 就是这种情况。

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

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

this.state = {
  toogle: JSON.parse(cookies.get('toggleMode')) || false
};
于 2019-04-09T00:50:04.513 回答