Reactjs обновить состояние прародителя - PullRequest
Новая
       23

Reactjs обновить состояние прародителя

2 голосов
/ 12 ноября 2019

Я только начал разработку с ReactJs и следовал учебному руководству serverless-stack.com. Я готов расширить приложение и создать шаблон с n-дочерними компонентами, но у меня возникают проблемы при управлении сеансом пользователей между компонентами внука.

У меня есть App.js, который управляет сеансом пользователей. Но у меня есть кнопка выхода в компоненте внука, и я не могу заставить ее вызывать функцию App.js signOut ().

App.js 

function App(props) {
  const [isAuthenticating, setIsAuthenticating] = useState(true);
  const [isAuthenticated, userHasAuthenticated] = useState(false);

  useEffect(() => {
    onLoad();
  }, []);

  const onLoad = async () => {
    try {
      await Auth.currentSession();
      userHasAuthenticated(true);
    } catch (e) {
      if (e !== "No current user") {
        alert(e);
      }
    }
    setIsAuthenticating(false);
  }

  const signOut = async () => {
    console.log("Signing out.");
    await Auth.signOut();
    userHasAuthenticated(false);
    console.log("signed out.");
  };

  return (
    <BrowserRouter>
        <Switch>
...
          <Layout
            path='/'
            name='Home'
            {...props}
            onLogout={signOut}
          />
        </Switch>
    </BrowserRouter>
  );
}

export default withRouter(App);

Мой компонент Layoutимеет множество различных компонентов, таких как заголовок, нижний колонтитул, навигация и т. д. 

function Layout(props) {
  return (
    <div className='app'>
...// header component
          <NavBar
            onLogout={props.onLogout}
            isAuthenticated={props.isAuthenticated}
          />
... //main body and footer components
</div>
);
}
export default Layout;

Наконец, мой внучатый компонент NavBar: 

function NavBar(props) {
  useEffect(() => {
    onLoad();
  }, []);

  async function onLoad() {
    console.log("Is authed at navbar? " + props.isAuthenticated);

  }

  return (
    <React.Fragment>
      <Nav className='ml-auto' navbar>
.. // other NavItems
        <UncontrolledDropdown nav direction='down'>
          <DropdownToggle nav>
            <img
              src={"../../assets/img/usermenu.png"}
              className='img-avatar'
              alt='user menu icon'
            />
          </DropdownToggle>
          <DropdownMenu right>
...
            <DropdownItem onClick={props.onLogout}>
              <i className='fa fa-lock'></i> Logout
            </DropdownItem>
          </DropdownMenu>
        </UncontrolledDropdown>
      </Nav>
    </React.Fragment>
  );
}

export default NavBar;

Когда я загружаю сайт и аутентифицируюсь, консольпишет "Является ли авторизация на Navbar? True". Итак, я знаю, что внук правильно получает состояние isAuthenticated. Но когда я нажимаю кнопку выхода, ничего не происходит, и в консоли не появляются предупреждения или ошибки.

1 Ответ

0 голосов
/ 12 ноября 2019

Сначала в компоненте Navbar я увидел эту функцию 

async function onLoad() {
    console.log("Is authed at navbar? " + props.isAuthenticated);
}

и проследил, где вы прошли props.isAuthenticated. Я нашел это здесь 

<Layout
  path='/'
  name='Home'
  props={props}
  onLogout={signOut}
/>

Почему у вас есть реквизит по имени props ??? Если вы хотите передать все реквизиты, которые были переданы родителю, его дочерним элементам (передача реквизитов), используйте оператор распространения . Вы можете увидеть ответ здесь: Что это значит ... отдых в React JSX

...