Ререндеринг компонента в Route с динамическим url

#reactjs #react_router

Здравствуйте. Пытаюсь вывести данные с разных url через один компонент. Данные выводятся
но при изменении url берутся с изначального запроса. componentDidMount (смотри код
ниже) срабатывает только при первом рендеринге компонента. Прошу вашей помощи. Нужно
чтобы компонент рендерился каждый раз заново с новыми данными при изменении его динамического url.



componentDidMount() {
    let animal_type = this.props.params.type;
    let advertisment = this.props.params.advertisment;

    $.ajax({
        url: "http://localhost:8091/list-animals?animal_type=" + animal_type + "&advertisement_type="
+ advertisment,
        dataType: "json",
        success: (data) => {
            //здесь в Redux Store отправляются полученные данные
            this.props.getServerData(data);
            console.log("ele" + animal_type, advertisment);
        }
    })
}

    

Ответы

Ответ 1

Продублирую из этого вопроса свой ответ, проблема аналогичная, попробуй адаптировать
под свой код


  Нашел два решения.
  
  Первое - добавил key-аттрибут на компонент, key изменяется (беру из роутинга) и
это заставляет реакт перемонтировать компонент
  
  let name = this.props.params.element;
...


  
  
  
  Измение key вызывает каждый раз ComponentDidMount()
  
  @connect(
    state => ({ element: state.element }),
    dispatch => ({elementActions: bindActionCreators(elementActions, dispatch)})
)
export default class ElementDetail extends React.Component {
    componentDidMount() {
        let { getProperties } = this.props.elementActions;
        getProperties(this.props.name)
    }

    ...

  
  
  
  Второе - использование componentWillReceiveProps() (спасибо Nick за наводку)
  
  let name = this.props.params.element;
...


  
  
  
  И в самом компоненте
  
  @connect(
    state => ({ element: state.element }),
    dispatch => ({elementActions: bindActionCreators(elementActions, dispatch)})
)
export default class ElementDetail extends React.Component {
    componentWillReceiveProps(nextProps) {
        if (nextProps.name !== this.props.name) {
            let { getProperties } = this.props.elementActions;
            getProperties(nextProps.name)
        }
    }

    componentDidMount() {
        let { getProperties } = this.props.elementActions;
        getProperties(this.props.name)
    }


...

  
  
  
  но во втором способе больше кода и он дублируется.
  
  Если кто-то даст свои пояснения и замечания, будет отлично   1:
  https://ru.stackoverflow.com/users/237588/nick