查詢字符串更改時重新呈現React組件

Question

我對React很新，所以如果這只是一個副本就道歉 - 我試圖尋找其他問題的解決方案，但沒有人幫助過我。

我希望在頁面的查詢字符串更改時重新呈現React組件。 我有一個基本的聯系表單，我預填充一個字段，其值通過查詢字符串傳遞。 我的理解是React應該重新渲染一個組件，無論它的狀態或組件發生變化，並且看到查詢字符串是props的一部分（這個。）然后我覺得它很容易，但是這似乎不是這樣的。我。

路線

<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手動刪除查詢字符串，那么該字段將按預期消隱。 只有當我點擊菜單中只鏈接到“聯系我們”的鏈接時才會發生任何事情。

Answer 1

弄清楚了。 畢竟，這不是由ContactUs組件引起的。 它是由子組件ContactUsForm引起的，它使用Formik並設置初始值，如下所示：

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

如果使用enableReinitialize更改初始值，則需要允許Formik重新初始化表單 - https://github.com/jaredpalmer/formik#enablereinitialize-boolean

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

Answer 2

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