Question

问题似乎很简单：我有一个主要的App，它具有登录和注销方法，以及其他功能：

  onLoggedIn(authData) { // need to use both the user and the token
    console.log(authData); // authData logged in console
    this.setState({
      user: authData.user.username //authData.user.username saved in userState
    });
    // saves token and user from handleSubmit in local storage 
    localStorage.setItem('token', authData.token); 
    localStorage.setItem('user', authData.user.username);
    this.getMovies(authData.token); // retrieves films list
  }

  onLoggedOut() {
    this.setState({
      user: null
    });

    localStorage.clear();
  }

onLoggedOut由导航栏按钮（也是子组件）使用：

function MyNavbar() {
  return (
    <Navbar bg="#781820" expand="lg">
      <Navbar.Brand className="logo">
        <h1>App Name</h1>
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="mr-auto">
          <Nav.Link className="text-white ml-5">Home</Nav.Link>
        </Nav>
        <Form inline>
          <Button id="btn-logout" type="submit" onClick={() => this.onLoggedOut()}>Logout</Button>
        </Form>
      </Navbar.Collapse>
    </Navbar>
  );
}

但是，尽管我尝试将方法和/或组件导入子组件：

import { onLoggedOut } from '../App/App;
import { App } from '../App/App';

onLoggedOut方法不起作用。该方法有效（如果我将按钮放在主App中，它将清除localStorage中的项目。请在这里的任何同事都可以帮您介绍一下吗？

Answer 1

您将需要使用Context Api。我制作了一个gist，它有一个简单的方法。

您犯了一个简单的错误

您可以从类中导入方法

import { onLoggedOut } from '../App/App';
import { App } from '../App/App';

我不确定您的导入方式，但是

如果onLoggedOut位于App内，则无法进行这种类型的导入。
如果onLoggedOut在App之外，则它将永远无法工作，因为它使用了this.setState。

您需要一些称为Lifting State Up的东西，但是对于身份验证，最好使用Context Api。我做了一个gist（有点一样，但对您来说更好）。

如何从父/另一个组件调用方法

1 个答案: