直接更新状态变化（反应）

Question

所以我目前面临一个常见问题，我的 class 组件中的状态值不会立即更改，而是仅在 rendering/refreshing 页面之后更改。我有一个名为 'auth' 的状态，我想在单击 'logout' 时将值设为 false。当用户按下按钮 'logout' 时，我想立即将身份验证状态设置为 'false'，然后将他们重定向到登录页面。但我的问题是，如果没有 refresh/rerendering 发生， this.state.auth 仍然为真。请记住，它必须在如下所示的 Class 组件中工作。

import React, { Component, useEffect, useState} from 'react';
import { AuthContext } from '../Context/AuthContext';
    
class Home extends Component {
  state = {
    auth: true
  }

  handleLogOut = () => {
    localStorage.clear();
    sessionStorage.clear();
    this.setState({auth: false});  //Here it stays 'true' up until refresh ?
    this.props.history.push('/'); 
  }

  render() {
    return (
      <AuthContext.Provider value={this.state.auth}>
        <div>
          <button onClick = {this.handleLogOut}>Log out</button>
        </div>
      </AuthContext.Provider>
    );
  }
};
    
export default withRouter(Home);

Answer 1

我在这里为您创建了一个沙盒小演示：https://codesandbox.io/s/a-simple-react-router-v4-tutorial-forked-uznym

您的 handleLogOut 函数会将 auth 读取为 false，直到 React 重新呈现该组件。除非可能发生任何错误，否则您可以在渲染方法中记录状态并查看它在那里读取的内容。

  handleLogOut = () => {
    console.log(this.state.auth);
    localStorage.clear();
    sessionStorage.clear();
    this.setState({ auth: false }); //Here it stays 'true' up until refresh ?
    // this.props.history.push("/");
    console.log(this.state.auth);
  };

  render() {
    console.log(this.state.auth);
    ...
  }

Answer 2

this.setState(
  { auth: false },
  () => this.props.history.push("/")
);

Answer 3

在您的具体情况下，使用 componentDidUpdate。

你可以这样使用它

componentDidUpdate(prevProps, prevState) {
  console.log(this.state) // Logs new state.
}

但是，我建议您转向功能组件，因为 componentDidUpdate 和类似的基于 class 的组件被认为是遗留的。

Resource

直接更新状态变化（反应）

Direct update on state change (React)

javascript

web-frontend

reactjs

use-state