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

import React，{PureComponent，Fragment}来自'React'；
从“/../../assets/images/contact banner.jpg”导入bannerImage；
从“查询字符串”导入查询字符串；
类ContactUs扩展了PureComponent{
render（）{
返回(
);
}
}
导出默认联系人；

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

更新

我注意到，如果我在浏览器中手动从URL中删除查询字符串，那么该字段将如预期的那样消失。只有当我在菜单中点击一个只链接到“联系我们”的链接时，似乎什么都没有发生

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计算出来。这毕竟不是由

ContactUs

组件引起的。这是由子组件

ContactUsForm

引起的，该组件正在使用Formik并设置初始值，如下所示：

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

---

这个问题会帮你的是的，我以前在那里看到过你的答案。我不想弄乱路由器，只要有一个解决方案，这一个组件如果可能的话。好吧，我们没有弄乱路由器，你可以选择使用你的自定义withRouter或默认的一个根据你的要求，而且，这是一个足够通用的解决方案，您可以在整个应用程序中使用，但为什么即使道具正在更改，组件也不会重新渲染？

此.props.location.search

已更改…这似乎也不起作用。它调用了

forceUpdate

，但仍然没有发生任何事情。查询参数与url参数不同。查询参数位于

？

之后，如

？param1=value1

。

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