当查询字符串更改时重新渲染 React 组件

Question

我对 React 很陌生，所以如果这只是重复，我深表歉意 - 我试图寻找其他问题的解决方案，但没有一个对我有帮助。

我希望 React 组件在页面的查询字符串更改时重新渲染。我有一个基本的联系表单，并且我正在使用通过查询字符串传递的值预填充一个字段。我的理解是，只要状态或组件发生变化，React 就应该重新渲染组件，并且看到查询字符串是 props (this.) 的一部分，那么我认为这很容易，但情况似乎并非如此我。

路线

<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;

我希望在以下情况下重新呈现联系表单： 用户从通过查询字符串发送行程名称的位置单击，然后单击页面标题中链接到“联系我们”的“联系我们”按钮再次页面，但查询字符串中没有行程名称。然后，这应该删除行程名称字段的预填充。

更新

我注意到，如果我手动从浏览器中的 URL 中删除查询字符串，则该字段会按预期被清空。只有当我单击菜单中仅链接到“联系我们”的链接时，似乎什么也没有发生。

Answer 1

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 中