即使将 state 值存储在 localstorage [React/React-router] 中，它的值也会丢失

Question

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

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

刷新页面后，由于某种原因， test_text 被设置回“”（空字符串） ，因此将我重定向回“/”url。 这很令人困惑，因为使用 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 ：请参阅useEffect 做什么？

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

• test_text仍然等于其初始 state即'' 。
• 由于test_text === '' ，当 JSX 被渲染时使用<Redirect>
• 渲染完所有 JSX 后，调用useEffect来更新test_text state

---

伪代码

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

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

---

代码

尝试更改这行代码：

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

对此：

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