React：有沒有辦法捕捉通過 history.push 發送的 props 的變化

Question

我正在編寫一個組件，在承諾中將參數上傳到服務器。 在上傳參數時，我重定向到另一個組件並將參數對象作為道具發送，如下所示：

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 但是當參數狀態更改為上傳時，這些函數不會觸發。

任何幫助或指導表示贊賞。

Answer 1

看看react-url-query 是否解決了你的問題。

作為自述文件中的示例，一旦您使用 HOC 之類的

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

MyComponent 將收到 2 個道具this.props.foo和this.props.onChangeFoo ，它們允許您獲取值並允許您更改 url 參數?fooInUrl

React hooks 的解決方案： use-query-params