React.js，针对特定属性的事件监听器onChange？

Question

当在使用ES6类语法定义的React组件中设置this.props.map时，我希望触发一个函数。

目前，我使用componentDidUpdate()，因为它在设置props时被触发，但同时也会从其他不相关的事件中触发，这并不理想。

另一方面，componentWillReceiveProps()似乎太早了（此时this.props.map返回undefined）。

因此，我希望仅在设置this.props.map时触发一个函数。

我是否忽略了某个钩子？或者可能有某种模式可以使用？

- malexanders

---

这里有什么问题吗？ - John Ruddell

@nem035接着说他正在使用componentDidUpdate()来实现它。但是它在其他地方被触发并不理想。那么他想要什么？如何做到这一点？如何避免在其他地方调用它？他的尝试是什么？ - John Ruddell

@JohnRuddell 是的，你说得对。这个问题并不是很清楚，我进行了编辑，更具体地询问了似乎OP想要的内容。 - nem035

@nem035 假设你知道他想要什么 :) 但那可能是他正在寻找的。 - John Ruddell

componentWillReceiveProps有一个参数。 - gu mingfeng

非常有帮助的伙计们，谢谢。清晰明了多了！ - malexanders

Answer 1

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

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

或者您可以使用before render函数。

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)，它是组件更新之前的先前 props 和 state。

另外，componentWillReceiveProps 有相反的一面 (nextProps, nextState)

使用这两个函数，我们可以比较组件的前一个属性或下一个属性，并查看是否在设置地图时进行了转换（即一个未定义，另一个不是）

---

编辑：

为了可视化正在发生的事情，以便您知道下一个 props 是什么（nProps），请查看此内容。

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

现在在 SomeComponent 内部

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

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

componentWillReceiveProps(nProps){
    console.log(this.props.count); // logs 1
    console.log(nProps.count);  // logs 6
}

它基本上是在您实际使用新属性进行呈现之前执行的。this.props.count 是组件中的当前值。而 nextProps.count（nProps.count）是要传入的下一个值。希望这有助于解释其工作原理！ :)

- John Ruddell

---

@matthewalexander 当然没问题！很高兴我能帮到你 :) - John Ruddell

嗨约翰 - 我肯定会这样做的，一旦我验证它是否有效。我已经被其他事情占据了19小时;) - malexanders

好的，既然你问了。也许你可以进一步解释一下nProps和pProps？ - malexanders

好的，我现在要去音乐会了，但稍后我会编辑我的帖子并提供更详细的解释。 - John Ruddell

@matthewalexander 嘿，抱歉回复晚了。我刚刚编辑了一个回复，希望能帮助你更好地理解 nProps 的运作方式 :) 如果你还有其他问题，请告诉我！ - John Ruddell