React：有没有办法捕获通过 history.push 发送的道具的变化答案

【问题标题】：React: Is there a way to capture changes to props sent via history.pushReact：有没有办法捕获通过 history.push 发送的道具的变化
【发布时间】：2019-12-11 01:34:55
【问题描述】：

我正在编写一个将参数上传到服务器的组件。在上传参数时，我重定向到另一个组件并将参数对象作为道具发送，如下所示：

this.props.history.push('/new-page/createForm', {
    parameters: this.state.parameters

});

在create Form组件中，我正在接收props并渲染参数的上传状态，他们渲染为正在上传（因为他们还没有完成上传）。

回到上一个组件，一旦参数上传承诺完成，我会更新参数对象以反映新的状态，即上传。

ParamsService.uploadParam(parameter, uploadRoot)
.then(() => {
parameter.status = 'Uploaded';
})

现在，一旦参数上传，我希望创建表单自动重新渲染以反映参数的新状态，但这不会自动发生。

但是，如果我在表单中执行某个操作，例如填充某个输入字段，触发 React 渲染，则参数显示为已上传。

有没有办法识别新创建表单中的道具更改并在参数状态更改为上传后重新渲染？

我已经尝试过componentDidUpdate和getDerivedStateFromProps，但是当参数状态更改为上传时，这些功能不会触发。

感谢任何帮助或指导。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

看看react-url-query是否能解决你的问题。

作为自述文件中的示例，一旦您像使用 HOC 一样

export default addUrlProps({
  urlPropsQueryConfig: {
    foo: { type: UrlQueryParamTypes.number, queryParam: 'fooInUrl' }
  },
})(MyComponent);

MyComponent 将收到 2 个 props this.props.foo 和 this.props.onChangeFoo，它们允许您获取值并允许您更改 url 参数 ?fooInUrl

React 钩子的解决方案：use-query-params

【讨论】：