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中手动删除了查询字符串，则该字段将按预期方式被清空。只是当我单击菜单中仅链接到“ contact-us”的链接时，似乎什么也没发生。

Answer 1

弄清楚了。毕竟，这不是ContactUs组件引起的。这是由子组件ContactUsForm引起的，该子组件使用Formik并按如下所示设置初始值：

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

如果使用enableReinitialize-https://github.com/jaredpalmer/formik#enablereinitialize-boolean

更改初始值，则需要允许Formik重新初始化表单。

<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

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

2 个答案: