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

Question

我向 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;

Answer 1

useEffect 在组件完成渲染后调用：参见What does useEffect do?

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

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

---

伪代码

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

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

---

代码

尝试更改这行代码：

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

到这里：

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