Question

我有一个Context组件，当我设置某个值时，我希望它们使用它来影响其他组件，但是我的理解在这里似乎是错误的。

我有一个MainComponent组件，该组件基本上可以处理屏幕的布局。

import { Consumer } from './context';

class MainContainer extends React.Component {


    render() {

        const noPadding = {
            margin: 0,
            padding: 0
          }

        const isAuthenticated = this.context.isAuthenticated()  

        return (
            <HashRouter>
            <Header />
            <Container>
              {isAuthenticated && 
              <AuthorisedArea>
                <Row style={noPadding}>
                  <Col md="3"  style={noPadding}>
                    <RightInfoBar />
                  </Col>
                  <Col md="9">
                      <RouteManager />
                  </Col>
                </Row>
              </AuthorisedArea>
              }
            </Container>
          </HashRouter>
        )
    }
}

MainContainer.contextType = Consumer;
export default MainContainer

这在用户登录时应该可以正常工作。在他们注销后，暂时来说，我确实希望黑屏。

在我的导航栏中，当用户单击注销时，我会这样做：

 handleLogout() {
      const { toastManager } = this.props;
      const { pathname } = this.props.location;
      this.context.changeAuthenticated(false);
      this.context.logout();

      if(pathname !== "/") {
        this.props.history.push("/");
      }
      toastManager.add('You\'re now logged out', {
        appearance: 'success',
        autoDismiss: true,
        pauseOnHover: false,
      });
    }

this.context.logout更新了我的上下文组件中的属性，将'isAuthenticated'设置为false。

所以我的基本上下文组件：

const Context = React.createContext();

export class Provider extends React.Component {

    state = {
        user: {
            name: "",
            email: "",
            authStatus : Auth.isAuthenticated()
        },
        changeEmail: (newEmail) => {
            let user = this.state.user;
            user.email = newEmail;
            this.setState({ user: user})
        },
        changeAuthenticated: (newState) => {
            if(newState ===false) Auth.logout();
            let user = this.state.user;
            user.name = "Craig";
            this.setState ({ user: user });
        },
        logout: () => {
            console.log("Will logout");
            Auth.logout();
            this.setState({authStatus: false});
        },
        isAuthenticated: () => {
            return Auth.isAuthenticated()
        }
    }

    render() {
        return (
            <Context.Provider value={this.state}>
                {this.props.children}
            </Context.Provider>
        )
    }
}

export const Consumer = Context.Consumer;

因此，我希望我的主要组件会注意到isAuthenticated变为false ...，屏幕将变黑（现在……一旦能够工作，我会做得更好）。

但是当我单击注销时-控制台指示Context组件中的方法已触发...并且该值变为false ...但是屏幕仍然存在。

仅当我按F5键时，屏幕才能正常运行。

我应该如何使MainComponent对React.Context值更改做出反应？

Answer 1

尝试const isAuthenticated = this.context.user.authStatus;

class MainContainer extends React.Component {
  render() {
    const isAuthenticated = this.context.user.authStatus;

    return (
      <HashRouter>
        ...
        <Container>
          {isAuthenticated && ...}
        </Container>
      </HashRouter>
    );
  }
}

React Context API和子组件刷新

1 个答案: