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

Question

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

当页面的查询字符串发生变化时，我希望 React 组件重新呈现。我有一个基本的联系表格，我正在使用通过查询字符串传递的值预先填充一个字段。我的理解是，React 应该在组件的状态或组件发生变化时重新渲染组件，并且看到查询字符串是 Prop 的一部分(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

弄清楚了。这不是由 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}
...
>