我有一個帶有按鈕的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);我需要知道在此示例中我做錯了什么。任何幫助都會很感激。