Question

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

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

我的理解是 useState() 只在初始渲染时被调用，否则状态是从存储在 state 中的任何东西中获得的，因为我调用了 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"));
  })

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

Answer 1

当您刷新页面时，您的应用会从头开始运行。如果您不想在页面刷新时丢失您的令牌，您应该在 localStorage 中保存/检索您的令牌。

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

1 个答案: