Question

我正在编码登录功能，该功能将在将令牌数据保存到客户端之后返回到home组件。但是，当它返回首页时，由于无法调用任何componentWillMount或componentDidMount函数，因此无法使用setState。

Login.js

axios.post(`${Config.API_URL}/users/login`, param)
    .then(response => {
        if (response) {
            this.setState({
                errorCode : response.status
            });
        }
        if(response.status===ErrorCode.SUCCESS){
            var authorization = {"authorization": response.headers.authorization.toString()}
            SessionStorage.saveLocalStorage(authorization);
            this.props.history.push("/");
        }
    })

App.js

 componentWillMount() {
    if(SessionStorage.isAuthorization()){
      this.setState({
        isAuthorization : true
      });
    }
    console.log('Component Will MOUNT!')
 }

ComponentWillMount（）从未被调用过，因此无论如何都无法为isAuthorization = true设置值。

Answer 1

一些注意事项：

1）我假设App.js实际上是您所有路由的所有者。在这种情况下，永远不会从ReactDOM卸载App.js。您要做的是为“ /”路由定义一个单独的组件，保持App.js的整洁，仅专注于呈现路由。我们将这个组件称为Home。

2）我对使用SessionStorage()的任何库都不熟悉。您可能正在寻找sessionStorage本机JS库。这将具有称为setItem和getItem的方法，用于存储和检索令牌。

3）通过单独的Home组件，我们可以调用componentDidMount()来检索令牌。

请牢记这一点，我们可以作为模板来完成如何实现所需的功能：https://codesandbox.io/s/suspicious-leftpad-moqs2

App.js

class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <BrowserRouter>
          <div>
            <Switch>
              <Route path="/" component={Home} exact />
              <Route path="/login" component={Login} />
            </Switch>
          </div>
        </BrowserRouter>
      </Provider>
    );
  }
}

Home.js

import React from "react";
import { Link } from "react-router-dom";

class Home extends React.Component {
  state = {
    token: ""
  };

  componentDidMount() {
    const token = sessionStorage.getItem("authorization");
    if (token) {
      this.setState({
        token: token
      });
    }
  }
  render() {
    return (
      <div>
        <Link to="/login">Login</Link>
        <p>{this.state.token}</p>
      </div>
    );
  }
}

export default Home;

Login.js

import React from "react";
class Login extends React.Component {
  handleClick = () => {
    var token = 210;
    sessionStorage.setItem("authorization", token);
    this.props.history.push("/");
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Login</button>
      </div>
    );
  }
}
export default Login;

调用this.props.history.push后如何使组件更新？

1 个答案:

App.js

Home.js

Login.js