Я получаю эту ошибку:
warning.js: 33 Предупреждение: невозможно вызвать setState (или forceUpdate) для несмонтированный компонент. Это неоперация, но это указывает на утечку памяти в вашем приложении. Чтобы исправить, отмените все подписки и асинхронные задачи в методе componentWillUnmount.
Но я не использую метод componentWillUnMount.
Я использую HOC, чтобы удостовериться, что пользователь прошел аутентификацию перед доступом к его/учетной записи маршрута.
Здесь Маршрут:
<StyleRoute props={this.props} path="/account" component=
{RequireAuth(Account)} />
где RequireAuth - это HOC. Здесь HOC:
import { withRouter } from 'react-router';
export default function RequireAuth(Component) {
return class AuthenticatedComponent extends React.Component {
componentWillMount() {
this.checkAuth();
}
checkAuth() {
if ( ! this.props.isAuthenticated) {
this.props.history.push('/');
}
}
render() {
return this.props.isAuthenticated
? <Component { ...this.props } />
: null;
}
}
return withRouter(AuthenticatedComponent);
}
Код работает как задумано, но я получаю эту ошибку, когда /account отображается. Как вы заметили, нигде в моем прямом коде нет метода componentWillUnMount. Я действительно в замешательстве, почему это предупреждение продолжает появляться, и любая информация поможет.
Обновление 23.05.18.
Чтобы избавиться от ошибки и пропустить реквизит, я сделал две вещи:
1) Я выбрал наличие двух функций более высокого порядка в родительском компоненте приложения вместо использования HOC. Одна функция более высокого порядка предназначена для передачи реквизита, а другая - для проверки подлинности. У меня были проблемы с передачей любого реквизита, кроме истории браузера, поэтому функция renderProps ниже.
renderProps = (Component, props) => {
return (
<Component {...props} />
);
}
checkAuth = (Component, props) => {
if (props.isAuthenticated) {
return <Component {...props} />
}
if (!props.isAuthenticated) {
return <Redirect to='/' />
}
}
2) Чтобы использовать их, я должен был выполнить рендеринг пользователя в своем маршруте, в отличие от компонента.
//I could pass props doing this, sending them through the above functions
<Route exact path="/sitter-dashboard" render={ () => this.checkAuth(SitterDashboard, this.props) } />
<Route exact path={"/account/user"} render={() => this.renderProps(User, this.props)} />
//I couldn't pass props doing this
<Route {...this.props} exact path="/messages" component={Messages} />
Ниже приведена документация по компоненту "Маршрутизатор и против" как метод визуализации маршрута: https://reacttraining.com/react-router/web/api/Route/route-render-methods
Также здесь есть хорошее объяснение Кару
Наконец, я использовал этот код из документации по React Router 4 в качестве шаблона для того, что я делал выше. Я уверен, что приведенное ниже чище, но я все еще учусь, и то, что я сделал, имеет для меня немного больше смысла.
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route
{...rest}
render={props =>
fakeAuth.isAuthenticated ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: "/login",
state: { from: props.location }
}}
/>
)
}
/>
);