第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

解決:從Cookie加載組件狀態(tài)時(shí)不會(huì)對(duì)其進(jìn)行更新

解決:從Cookie加載組件狀態(tài)時(shí)不會(huì)對(duì)其進(jìn)行更新

慕斯709654 2021-04-09 14:15:05
我有一個(gè)帶有按鈕的React應(yīng)用程序,該按鈕具有一個(gè)切換按鈕,該切換按鈕允許顯示或隱藏頁(yè)面中的某些視圖,因此,如果用戶單擊該切換按鈕,它將看到一個(gè)視圖(切換為“打開”視圖)或另一個(gè)視圖(切換為“關(guān)閉”)看法)。我必須將此切換的值存儲(chǔ)在cookie中,以確保當(dāng)用戶再次訪問(wèn)該網(wǎng)站時(shí),它會(huì)看到最后一次選擇的視圖(“打開”或“關(guān)閉”)。我試圖通過(guò)使用“ npx create-react-app”從頭開始創(chuàng)建新的react應(yīng)用來(lái)以最簡(jiǎn)單的方式解決此問(wèn)題。我還包括了npm react-cookie庫(kù)。當(dāng)用戶單擊切換按鈕,在cookie中設(shè)置了正確的值并顯示了正確的視圖時(shí),這可以很好地工作。但是,如果我重新加載頁(yè)面,它將始終顯示不正確的視圖,而忽略了從cookie加載的值。我無(wú)法解釋為什么僅在頁(yè)面加載時(shí)才會(huì)發(fā)生這種情況。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);我需要知道在此示例中我做錯(cuò)了什么。任何幫助都會(huì)很感激。
查看完整描述

1 回答

?
Cats萌萌

TA貢獻(xiàn)1805條經(jīng)驗(yàn) 獲得超9個(gè)贊

您的Cookie會(huì)給您返回不是布爾值的字符串,您可以嘗試如下更改控制臺(tái)日志,該控制臺(tái)日志將打印“字符串”,當(dāng)狀態(tài)被cookie值更新時(shí)。您的情況太過(guò)分了嗎?如果toogle中存在某些內(nèi)容,則將始終返回true,這是從cookie設(shè)置toogle時(shí)的情況。


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

如下使用JSON解析您的cookie值,它將起作用。


this.state = {

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

};


查看完整回答
反對(duì) 回復(fù) 2021-04-22
  • 1 回答
  • 0 關(guān)注
  • 263 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)