查询字符串更改时重新呈现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