Я пытаюсь создать частный компонент маршрутизатора для моего приложения.Это мой код.
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.
Если кто-то можетисправьте мое решение, это было бы очень полезно.