Реакция условного рендеринга, сбоя с контекстом - PullRequest
Новая
       6

Реакция условного рендеринга, сбоя с контекстом

1 голос
/ 31 марта 2019

Ниже приведен компонент, который корректно меняет «Вход» и «Выход» в боковой навигации, но не работает в обычном сценарии.По сути, компонент «LoginLogOutButton» не выполняет повторную визуализацию, даже если вход выполнен успешно.Функция isAuthenticated, записанная в другом файле auth.js, который возвращает true или false на основании входа / выхода из системы.

AuthContext 

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`

enter image description here Спасибо запомощь

1 Ответ

0 голосов
/ 01 апреля 2019

Трудно сказать, не видя вашего AuthContext, но я почти уверен, что проблема в том, что вы передаете auth объект как опору, которая не меняется, то есть это тот же объект / та же опора, следовательно, React не не запускать обновление. Вместо этого вы должны передать isAuthenticated значение напрямую, обратите внимание, я имею в виду не функцию, а логическое значение (true или false). В этом случае ваши компоненты будут обновлены правильно.

...