Question

我有React路线：

<Route path='/contract/:id' component={ContractForm}/>

我想在ContractForm组件中读取此id参数的值，以便根据收到的id值从数据库中检索数据（当然使用REST API和redux-saga）。

我正在关注React Router Pass Param to Component并提供解决方案：

<Route exact path="/details/:id" render={(props)=>{
    <DetailsPage id={props.match.params.id}/>
}} />

但我需要在渲染之前的某个时间处理id值。哪里（从什么事件）我应该读取id值？我正在考虑几个事件，但没有一个令人满意：

我无法在ContractForm constructor()或componentDidMount()中读取ID，因为这些事件只会被触发一次，如果我从当前合同实体直接导航到下一个合同实体，那么我的ContractForm不会重新创建重新安装，所以事件不会发生
我无法在ContractForm componentWillUpdate(nextProps, nextState)中读取ID，因为在安装和创建组件时不会触发它。
我可以使用特殊的方法processParams来读取this.props.match.params并从数据库中检索数据。

render() { const {contractId, description} = this.state; this.processParams(); return ( <div>...</div>)}

但是这个方法（在渲染时调用）将更新全局参数或本地参数，这将导致另一个渲染调用，所以 - 我应该在processParams中创建特殊逻辑以防止第二轮渲染。我很难做出这样的逻辑。

那么 - 何时（何时）读取路由器传递的参数？

教程非常基础，不会详细介绍。

我特别感兴趣的是将REST API数据加载到道具。我知道（感谢答案）关于getDerivedStateFromProps https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops 这正是将REST API数据加载到组件状态的事件，但我寻求用于加载REST API的类似机制（事件等）数据转换为全球store props 。 也许组件不能做这样的加载？也许应用程序应该听一些导航事件，导航事件将数据加载到商店道具中，然后应用程序可以用组件视图简单地渲染那些全局数据。

在运行时将动态REST API数据加载到道具中可能是不好的设计吗？ 例如。所有CRUD教程： http://www.thegreatcodeadventure.com/building-a-simple-crud-app-with-react-redux-part-1/ https://medium.com/@rajaraodv/a-guide-for-building-a-react-redux-crud-app-7fe0b8943d0f https://github.com/maprihoda/react-redux-crud 在应用程序主要组件的初始化期间将数据加载到props中。我的意图是我最初可以加载conracts列表，然后用户可以选择（导航到）某个特定的合同，我的应用程序会在打开合同表单时将此合同（大量图表）加载到道具中，并在导航时将不同的合同重新加载到道具中不同的合同。

Answer 1

您需要在 DetailsPage 类组件中实现componentWillReceiveProps函数。由于相同的组件使用更新的参数重新渲染，而不是在更改路径参数时重新安装，这是因为参数作为道具传递给组件并且在道具上更改，React组件重新渲染而不是重新安装。你可以用这个作为参考 https://reactjs.org/docs/state-and-lifecycle.html

https://hackernoon.com/reactjs-component-lifecycle-methods-a-deep-dive-38275d9d13c0

您可以使用 props.params.id

获取参数

Answer 2

您可以像

一样阅读

this.props.match && this.props.match.params.id

您可以随时随地使用this.props.match 只确保您使用道具在super中呼叫constructor。

constructor(props){
    super(props)
}

通过重定向，可以重新安装组件。所以，生命周期阶段也是如此。

何时（何处）阅读React router params以便将数据检索到道具中？

2 个答案: