Перерисовать React Component при изменении строки запроса - PullRequest
Новая
       30

Перерисовать React Component при изменении строки запроса

0 голосов
/ 27 июня 2018

Я очень новичок в React, поэтому извиняюсь, если это всего лишь дубликат - я пытался найти решение других вопросов, но никто не помог мне.

Я хочу, чтобы компонент React повторно отображался при изменении строки запроса на странице. У меня есть базовая форма контакта, и я предварительно заполняю одно поле значением, переданным через строку запроса. Насколько я понимаю, React должен перерисовывать компонент всякий раз, когда его состояние или компоненты меняются, и, поскольку строка запроса является частью реквизита (это.), Тогда я подумал, что это будет легко, но, похоже, это не так. я.

Маршрут 

<Route exact path="/contact-us" component={ContactUs} />

Компонент 

import React, { PureComponent, Fragment } from 'react';
import bannerImage from './../../assets/images/contact-banner.jpg';
import QueryString from 'query-string';

class ContactUs extends PureComponent {
  render() {
    return (
      <Fragment>
        <CommonBanner banner={bannerImage} title="Contact us" />
        <ContactUsForm tripName={QueryString.parse(this.props.location.search).tripName)} />
      </Fragment>
    );
  }
}

export default ContactUs;

Я хочу, чтобы контактную форму повторно обработали, когда: пользователь щелкнул по ссылке из местоположения, которое отправляет название поездки через строку запроса, а затем нажимает кнопку "Связаться с нами" в заголовке страницы, которая ссылается на снова свяжитесь с нами, но без имени поездки в строке запроса. Это должно затем удалить предварительное заполнение поля названия поездки.

UPDATE

Я заметил, что если я вручную удалил строку запроса из URL в браузере, то поле будет очищено, как и ожидалось. Только когда я нажимаю на ссылку в меню, которая просто ссылается на «свяжитесь с нами», кажется, что ничего не происходит.

Ответы [ 2 ]

0 голосов
/ 27 июня 2018

Разобрался. Это не было вызвано компонентом ContactUs в конце концов. Это было вызвано подкомпонентом ContactUsForm, который использует Formik и устанавливает начальные значения следующим образом: 

<Formik
  initialValues={{
  firstName: '',
  surName: '',
  email: '',
  message: '',
  tripName: this.props.tripName || '',
}}
...
>

Вам необходимо разрешить Formik повторно инициализировать форму, если начальные значения изменяются с помощью enableReinitialize - https://github.com/jaredpalmer/formik#enablereinitialize-boolean

<Formik
  initialValues={{
  firstName: '',
  surName: '',
  email: '',
  message: '',
  tripName: this.props.tripName || '',
}}
enableReinitialize={true}
...
>
0 голосов
/ 27 июня 2018 
componentDidUpdate(prevProps, prevState) {
  if (prevProps.match.params.'queryVariable' !== this.props.match.params.'queryVariable') {
  //either 
    this.forceUpdate()
 //or
    this.setState({
      something:something
    })
  }
}

поместите пример переменной вашего запроса в prevProps.match.params.id и this.props.match.params.id

...