Question

我正在使用React Router 4.

当我使用渲染参数componentWillReceiveProps（）渲染组件时，它不会触发第一次，因此我需要单击两次以向组件发送道具。

我这样渲染：

const CartRoute = (props) => (<Cart itemsInCart = {this.state.itemsInCart} deleteItemFromCart = {this.deleteItemFromCart} {...props} />);
.....
  <Switch>
    .....
    <Route path="/cart" render={CartRoute} />
  </Switch>

没有路由器（当所有组件都在同一页面上时）它可以正常工作。

以下是详细说明：

React router - Need to click LINK twice to pass props to Component

Answer 1

我认为原因很简单，按照DOC：

React并没有在初始道具期间调用componentWillReceiveProps 安装。如果某些组件的道具可能会调用此方法更新。在安装的组件接收新的props之前调用componentWillReceiveProps（）。

当第一次组件被渲染时，

componentWillReceiveProps将不会被调用，此时componentDidMount被调用，当您对道具值进行任何更改时，只会componentWillReceiveProps被触发。所以，如果你想进行一些计算，首先要在componentDidMount方法中进行计算，如下所示：

componentDidMount(){
   console.log('props values', this.props); //it will print the props values
}

componentWillReceiveProps是更新生命周期方法而不是挂载方法。

安装方法：

当组件的实例存在时，将调用这些方法创建并插入DOM。

更新方法：

对道具或州的更改可能会导致更新。这些方法在重新渲染组件时调用。

Check the difference between Mounting and Updating lifecycle method.

React Router 4 - componentWillReceiveProps（）不会触发

1 个答案: