反应状态变量被覆盖（useState）

Question

我遇到一个问题，我的状态变量似乎被调用 useState() 时设置的 default/initial 值覆盖。我有 const [token, setToken] = useState("")。我将 setToken 函数传递给我的 Login 组件，当我登录时，我通过 setToken 函数更新令牌。

在我的 App.js 中，如果未设置令牌，我只想呈现登录组件，否则，我将重定向到 Post.js 分量。一旦我登录，我的令牌就被设置，我被重定向到我的 Posts.js 页面，问题是如果我刷新页面，令牌将再次被覆盖为初始值我不确定为什么会这样。

我的理解是 useState() 仅在初始渲染时调用，否则状态是从存储在状态中的任何内容获得的，因为我调用了 setToken 函数，应该是带有令牌的状态, 不是空字符串。

我错过了什么？

App.js

function App() {
  const [errors, setErrors] = useState([]);
  const [token, setToken] = useState("");

  
  console.log('token', token)
  return (
    <Fragment>
      <Router>
        <Navbar />
        <Route exact path="/" component={Landing} />
        <Container>
          {!errors.length ? <></> : <Alerts errors={errors} handleError={setErrors}/> }
          <Switch>
            <Route 
              exact path="/login" 
              render={ token ? (props) => <Redirect push to="/posts" {...props} /> : (props) => (<Login error={setErrors} isLoggedIn={setToken} {...props} />)}
            />
            <Route exact path="/posts" 
            render={token ? (props) => <Posts token={token} {...props} /> : (props) => <Redirect push to="/login" {...props} />} />
          </Switch>
        </Container>
      </Router>
    </Fragment>
    
  );
}

Landing.js

的相关部分

const handleSubmit = async (e) => {
    e.preventDefault();
    const res = await login(email, password);

    if(res.status !== 200){
      props.error(res.data.errors);
    }else{
      props.error([])
      props.isLoggedIn(res.data.token)
    }

  }

更新： 通过将我的令牌存储在本地存储中，我确实弄清楚了如何做我想做的事。在我的 App.js 中，我现在正在这样做

function App() {
  const [errors, setErrors] = useState([]);
  const [token, setToken] = useState(null);

  useEffect(() => {
    setToken(window.localStorage.getItem("token"));
  })

这并没有像最初那样覆盖我的 token 状态，所以它正在做我想做的事情，但我仍然想知道我在最初的实现中做错了什么？

Answer 1

当您刷新页面时，您的应用会从头开始运行。如果您不想在页面刷新时丢失您的令牌，您应该 save/retrieve 您的 to/from localStorage。

反应状态变量被覆盖（useState）

React state variable being overwritten (useState)

react-hooks

use-state