时间戳

首页 > 解决方案 > 即使将状态值存储在本地存储 [React/React-router] 中，状态值也会丢失

javascript - 即使将状态值存储在本地存储 [React/React-router] 中，状态值也会丢失

问题描述

我向 api 发出请求，作为回报，我得到“你好”。我将这个 hello 存储在 test_text变量中，然后作为回报，如果未设置 test_text，我希望将用户重定向到另一个 url。否则我想展示一个组件。

在我刷新页面之前，此代码工作正常。

刷新页面后，由于某种原因，test_text 被设置回“”（空字符串），因此将我重定向回“/”网址。这很令人困惑，因为使用 UseEffect，我将“hello”存储在 localstorage 中，而使用另一个 useEffect 我试图从 localstorage 获取“hello”文本。这是代码。请帮我。

import {React,useState,useEffect} from 'react';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import Landing from './components/landing/LandingIndex';
import Home from './components/home/HomeIndex';

function App() {

    const [test_text, setText_text] = useState('');

    useEffect(()=>{
        const data = localStorage.getItem('data');
        console.log(localStorage.getItem('data')); // hello
        if(data){
            setText_text(JSON.parse(data));
        }
    },[])

    useEffect(() => {
        fetch('/sessionDetails', {
            method: 'POST',
            cache: 'no-cache',
            headers: {
                'content_type': 'application/json',
            },
            body: JSON.stringify()
        }).then(response => {
            return response.json()
        }).then(json => {
            console.log(json.result_text) // hello
            setText_text(json.result_text);
            localStorage.setItem("data", JSON.stringify(json.result_text))
        })
    },[])


    return (
        <div className='App'>
        <Router>
            <Switch>
                <Route path = '/' exact component = {Landing}/>
                <Route  exact path = '/home'>
                {test_text === '' ? <Redirect to="/" /> : <Home />}
                </Route>
            </Switch>
        </Router>
        </div>
    );
}

export default App;

标签： javascriptreactjsreact-routerreact-router-dom

解决方案

useEffect在组件完成渲染后调用：请参阅useEffect 做什么？

当您的组件完成第一次渲染时：

  • test_text 仍然等于它的初始状态，即 ''。
  • 因为test_text === '',<Redirect>是在渲染 JSX 时使用的
  • 渲染完所有 JSX 后，useEffect调用 来更新test_text状态

伪代码

在此示例中，检查是否localStorage.getItem('data')为falsy是有意义的。

  • 如果false，使用<Redirect/>组件
  • 否则使用该<Home/>组件。

代码

尝试更改这行代码：

{test_text === '' ? <Redirect to="/" /> : <Home />}

对此：

{!localStorage.getItem('data') ? <Redirect to="/" /> : <Home />}

推荐阅读