ReactJs: как выполнить код перед монтированием компонента, поскольку componentWillMount устарел?

Я пытаюсь условно перенаправить пользователя на домашнюю страницу перед монтированием компонента:

 componentWillMount(){
    console.log("componentWillMount is called.")
    let userHasNotChosenOpportunity = true
    if (userHasNotChosenOpportunity) {
      this.props.history.push("/home")
    }
  }

У меня две проблемы:

  1. componentWillMount никогда не звонят
  2. componentWillMount устарел, и, похоже, нет альтернативы выполнению кода перед монтированием компонента.

Какие-либо предложения?


reactjs javascript redux react-lifecycle
person AG_HIHI    schedule 07.12.2020    source источник
comment
Вы пытались вызвать перенаправление внутри конструктора (реквизиты) {}   -  person Sinan Yaman    schedule 07.12.2020
comment
для вас проблема использовать componentDidMount?   -  person VersifiXion    schedule 07.12.2020
comment
Отвечает ли это на ваш вопрос? Как мне чередовать componentWillMount()?   -  person Jax-p    schedule 07.12.2020
comment
@SinanYaman проблема с тем, что рендеринг выполняется   -  person AG_HIHI    schedule 07.12.2020
comment
@MarcCharpentier с рендерингом componentDidMount выполняется   -  person AG_HIHI    schedule 07.12.2020
comment
Я думаю, что это идея Tribble, если вы перенаправляете пользователя в компонент, используя эти функции, вам, вероятно, следует использовать перенаправление маршрута или что-то в этом роде для этого!   -  person b3hr4d    schedule 07.12.2020
comment
@Jax-p проблема с componentDidMount и конструктором заключается в том, что рендеринг выполняется до перенаправления   -  person AG_HIHI    schedule 07.12.2020
comment
@ b3hr4d b3hr4d, как мне выполнить проверку состояния перед визуализацией компонента   -  person AG_HIHI    schedule 07.12.2020
comment
@AhmedGhrib Есть еще ответы ... Конструктор обязательно вызывается перед рендерингом. Также getDerivedStateFromProps() является следующим методом, вызываемым после конструктора, прямо перед render(). См. весь Жизненный цикл React.   -  person Jax-p    schedule 07.12.2020
comment
следует сделать защищенный корень для проверки реквизитов, подобных этому ответу: stackoverflow.com/a/65178365/12608714   -  person b3hr4d    schedule 07.12.2020
comment
@Jax-p Jax-p Верно, но код внутри рендеринга по-прежнему выполняется. Мне нужно перенаправить и предотвратить выполнение кода внутри рендеринга.   -  person AG_HIHI    schedule 07.12.2020

Ответы (2)


arrow_upward
0
arrow_downward

Вы должны попробовать вызвать его на componentDidMount или, если вам по какой-то причине действительно нужно использовать componentWillMount, вы можете использовать UNSAFE_componentWillMount, но, как указано, это небезопасно.

person Runner    schedule 07.12.2020

arrow_upward
0
arrow_downward

Я решил это так:

import React from "react";
import { Route, Redirect } from "react-router-dom";
import { connect } from "react-redux";
import PropTypes from "prop-types";
const OpportunityRedirectRoute = ({
  component: Component,
  opportunities,
  ...rest
}) => {
  let userHasNotChosenOpportunity =
    Object.keys(opportunities.chosen_opportunity).length === 0 &&
    opportunities.chosen_opportunity.constructor === Object;

  return (
    <Route
      {...rest}
      render={(props) =>
        userHasNotChosenOpportunity ? (
          <Redirect to="/courses" />
        ) : (
          <Component {...props} />
        )
      }
    />
  );
};

OpportunityRedirectRoute.propTypes = {
  opportunities: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => ({
  opportunities: state.opportunities,
});

export default connect(mapStateToProps)(OpportunityRedirectRoute);

В App.js:

 <OpportunityRedirectRoute
              exact
              path="/opportunity"
              component={OpportunityPage}
            />
person AG_HIHI    schedule 07.12.2020