reactjs - 反应条件渲染失败与上下文

Question

以下是在侧导航中正确更改“登录”和“注销”但在正常情况下无法正常工作的组件。基本上，即使登录成功，“LoginLogOutButton”组件也不会重新渲染。“isAuthenticated”函数写在另一个 auth.js 文件中，它根据登录/注销返回 true 或 false。

授权上下文

import React from "react";
const AuthContext = new React.createContext();
export default AuthContext;

AuthContext.Provider

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      auth: new Auth(this.props.history),
      tokenRenewalComplete: false,
      classes: this.props.classes
    };
  }

  componentDidMount() {
    this.state.auth.renewToken(() =>
      this.setState({ tokenRenewalComplete: true })
    );
  }

  render() {
    const { classes, auth } = this.state;
    // Show loading message until the token renewal check is completed.
    if (!this.state.tokenRenewalComplete) return "Loading...";
    return (
      <AuthContext.Provider value={auth}>
        <NavBar />
        <div className={classNames(classes.main)}>
          <div className={classes.container}>
            <Switch>
              <Route path="/blog/detail" component={BlogDetail} />
              <Route path="/blog" component={Blog} />
              <Route path="/courses" component={CoursesPage} />
              <Route path="/course/:slug" component={ManageCoursePage} />
              <Route path="/course/" component={ManageCoursePage} />
              <Route
                path="/callback"
                render={props => <Callback auth={auth} {...props} />}
              />
              <Route path="/public" component={Public} />
              <PrivateRoute path="/private" component={Private} />
              <Route path="/" component={Home} />
            </Switch>
            <ToastContainer autoClose={3000} hideProgressBar />
            <Footer />
          </div>
        </div>
      </AuthContext.Provider>
    );
  }
}

export default withStyles(landingPageStyle)(App);

注意：HeaderLinks 是 NavBar 的子组件

AuthContext.Consumer

   import AuthContext from "../../../AuthContext";
    const LoginLogOutButton = props => {
      if (props.auth.isAuthenticated())
        return (
          <ListItem className={props.classes.listItem}>
            <Link
              to="/"
              className={props.classes.navLink}
              onClick={props.auth.logout}
            >
              <Person className={props.classes.icons} />
              Log Out
            </Link>
          </ListItem>
        );
      else
        return (
          <ListItem className={props.classes.listItem}>
            <Link
              to="/"
              className={props.classes.navLink}
              onClick={props.auth.login}
            >
              <Person className={props.classes.icons} />
              Log In
            </Link>
          </ListItem>
        );
    };

    class HeaderLinks extends Component {
      constructor(props) {
        super(props);
      }
      render() {
        const { classes } = this.props;
        return (
          <AuthContext.Consumer>
            {auth => (
              <List >
                <ListItem>
                  <CustomDropdown
                    noLiPadding
                    buttonText="Menu"
                    buttonProps={{
                      className: classes.navLink,
                      color: "transparent"
                    }}
                    buttonIcon={Apps}
                    dropdownList={[
                      <Link to="/">
                        Home
                      </Link>,
                      <Link to="/blog" >
                        Blog
                      </Link>
                    ]}
                  />
                </ListItem>

                <LoginLogOutButton auth={auth} {...this.props} />

              </List>
            )}
          </AuthContext.Consumer>
        );
      }
    }

    export default withStyles(headerLinksStyle)(HeaderLinks);`enter code here`

谢谢您的帮助

Answer 1

没有看到你很难说，AuthContext但我很确定问题是你将auth对象作为不会改变的道具传递，即它是相同的对象/相同的道具，因此 React 不会触发更新。相反，您应该isAuthenticated直接传递值，注意，我的意思不是函数，而是布尔值（true或false）。在这种情况下，您的组件将正确更新。