Question

我正在尝试为我的应用程序构建专用路由器组件。这是我的代码。

const history = createBrowserHistory()
class PrivateRoute extends Component {
  constructor(props) {
    super(props);
    this.state={auth:false}    
  }

  async componentDidMount() {
    let userCheckResult = await checkUser(localStorage.getItem('token'), URL_ENDPOINTS.USER_CHECK);
    if (!isEmptyObj(userCheckResult)) {
      this.setState({auth:true})
    }
  }
  render() {    
    if (this.state.auth) {
      return (
        <Route {...this.rest} {...this.props} component={this.props.component} />
      )
    } else {
      return (
        <Redirect to={{ pathname: '/login' }} />
      )
    }

  }
}
class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Header />
        <Router history={history}>
          <Switch>
            <Route path="/login" exact component={LoginPage} />
            <PrivateRoute exact path="/statements" component={Statements} />
          </Switch>
        </Router>
        <Footer />
      </Provider>
    )
  }
}

export default App

在我的componentDidMount中，我已经更新了状态（但状态没有改变）。我正在尝试在我的渲染函数中引用该状态。

因为它不会更改状态，也不会更改已验证用户的路由。

它在控制台上显示此错误。

index.js:1446 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

如果有人可以纠正我的解决方案，那将真的很有帮助。

Answer 1

默认情况下，您的状态设置为auth: false。如果您的this.state.auth为假，则可以在渲染中立即重定向。这意味着该组件将始终重定向。

您最终在componentDidMount中的异步请求之后设置了状态，但是到那时您已经重定向了，此组件很可能已经卸载了很长时间，因此导致在尝试设置状态后发出警告。该组件已卸载。

要解决此问题，我建议在您的状态下添加第二个变量，以跟踪您是否执行了身份验证请求。如果尚未执行身份验证，则在渲染中您不应重定向（也许显示某种微调器）。执行后，您可以根据身份验证确定是否应该重定向用户。

状态在PrivateRoute组件上没有更改

1 个答案: