Question

我试图同时在App组件（根组件）中传递道具，然后再从App本身传递到Header组件。

我在App和Header Component中都使用了Life Cycle Hooks upto componentWillReceiveProps（）。

componentWillMount（），render（），componentDidMount（）正在按预期顺序在两个Component中执行。

但是，即使在传递道具时，也不执行componentWillReceiveProps（）。这是意外行为，因为componentWillMount（）已正常执行！

我将非常感谢您知道为什么会这样！谢谢:)

请通过以下链接检查代码示例：

https://codesandbox.io/s/mjj0q75yoj

请转到图片以更清楚地了解该问题：

Answer 1

我不明白您为什么期望组件进行更新（谁传递了新的道具？），但是通常您应该使用componentDidUpdate(prevProps, prevState)

还可以考虑通过静态getDerivedStateFromProps(props, state)来管理状态，即：

static getDerivedStateFromProps(props, state){
  // just return the state
  return {
    isLoading: false,
    money: props.money
  }
}

-它在更新时执行init +。

Answer 2

如官方文档（参见https://reactjs.org/docs/react-component.html）所述

 componentWillReceiveProps()

生命周期方法已过时，应避免使用。

它从未被调用的原因是，为了帮助用户避免它，React开发人员将其重命名了

 UNSAFE_componentWillReceiveProps()

但是您应该避免使用它，因为他们计划弃用该方法

Answer 3

1。未调用 componentWillReceiveProps（）的主要原因是因为我传递给 Header Component 的道具根本没有变化，我一直在传递相同的道具一次又一次。并且 componentWillReceiveProps（）仅在每次传递的道具不同时才执行。

这是我的 Header组件问这个问题时的样子。

<Header
      menus={["home", "about", "services", "blog"]}
/>

Header Component仅具有 menus prop 作为数组（在询问此问题时），并且没有事件正在更新此 menus prop ，这就是为什么我的 componentWillReceiveProps（）从未在 Header Component 中被调用/调用。

注意：为了简单起见，我现在将另一个道具传递给 Header Component ，并开始在此 prop上测试我的代码，而不是使用数组菜单道具。

 <Header
    menus={["home", "about", "services", "blog"]}  
    prop={this.state.prop}
 />

我正在使用事件处理程序来使我的 state.prop 进行更新：

 // Dynamically sending Props
  handlePropSending = () => {
   this.setState({
    ...this.state,
    prop: this.state.prop + 1
   });
  };

当我点击按钮“将道具发送到标题”时，新道具将发送到 Header Component 和我们的 componentWillReceiveProps 被成功调用并执行。

应用程序组件
中的 componentWillReceiveProps 也是同样的问题
ReactDOM.render（，rootElement）;

自从我添加了资金支持（money = {9199}）以来，实际上没有资金支持可用于更新资金支持它是值（我们可以将其传递给 App Component ，以调用它的 componentWillReceiveProps 方法）。

注意： 代码现在已更新，并且现在有事件处理程序可确保道具不断更新，并且componentWillReceiveProps（）方法确实已成功被调用。

componentWillReceiveProps demonstrated along with other life Cycle Hooks

就像他们说的一样:)一切都好了：）

React，componentWillMount（）生命周期挂钩

3 个答案: