编辑：

Question

我希望在React组件上设置this.props.map时触发一个函数 - 使用ES6类语法定义：

export default class MapForm extends React.Component {...

目前，我正在使用componentDidUpdate()，因为它是在props设置时触发的 - 但它也是由其他不相关的事件触发的，这些事件并不理想。

另一方面，componentWillReceiveProps()发生在组件的生命周期的早期（this.props.map此时返回undefined）

所以我想在this.props.map设置时触发功能。

我缺少一个钩子吗？或者某种模式？

Answer 1

如果您只想触发一次。你可以这样做

Object.prototype.hasOwnProperty

或者您可以使用之前的渲染功能

componentDidUpdate(pProps){
    if(!pProps.map && this.props.map){
        this.props.callSomeFunc();
    }
}

如果您想知道它何时更改以调用该函数（意味着它已经创建但已更改为其他内容）

componentWillRecieveProps(nProps){
    if(!this.props.map && nProps.map){
        this.props.callSomeFunc();
    }
}

（如果它是一个对象，你可能想要将第二个比较改为深层对象）

这两个函数都具有组件更新前后的下一个或上一个状态的概念。

if( (!pProps.map && this.props.map) || (this.props.map !== pProps.map){表示渲染已完成且组件已更新。它有两个参数，你可以在函数componentDidUpdate中包含它，它是更新之前组件的先前道具和状态。

或者(prevProps, prevState)具有相反的一面componentWillReceiveProps

使用这两个我们可以比较之前的道具或组件的下一个道具，并查看该转换是否在设置地图时（也就是一个未定义而另一个未定义）

编辑：

可视化发生的事情，这样你就知道下一个道具（nProps）看到了什么。

(nextProps, nextState)

现在在SomeComponent

中

count = 1;
<SomeComponent count={count} />

现在假设我们将5添加到计数。

class SomeComponent extends React.Component {

    componentWillReceiveProps(nProps){
        console.log(this.props.count); // logs 0
        console.log(nProps.count);  // logs 1
    }
}
SomeComponent.defaultProps = {count: 0};

基本上它在您使用新道具实际渲染之前执行。 this.props.count是组件中的当前值。和nextProps.count（nProps.count）是下一个值。希望这有助于解释它是如何工作的！：）

React.js，事件监听器onChange for Specific Prop？

1 个答案:

编辑：