设置默认回调以响应 setState() 函数答案

【问题标题】：set a default callback to react setState() function设置默认回调以响应 setState() 函数
【发布时间】：2019-04-27 22:17:02
【问题描述】：

我想看看是否可以为组件的每次状态更新调用一个函数。由于 react setState() 接受回调作为秒参数，有没有办法在每次状态更改时调用函数？

我尝试了一些东西，但并不顺利。您可以查看here。

如果我绑定的方式有问题，请纠正我。

【问题讨论】：

嘿，看看这个：codesandbox.io/s/0py6yo9vjv
@igorves 我知道可以通过这种方式实现。我的问题是看看是否有办法直接使用 javascript 的 bind 函数而不是使用任何反应生命周期方法将它绑定到每个 setState。
知道了，但这不是最好的方法：直接添加一些额外的功能
同意。也没有那么好。无论哪种情况，我都无法绑定它。感谢您的帮助:)

【解决方案1】：

如果我理解正确，您可以使用componentDidUpdate 检查状态是否已更新并调用其中的函数。请注意，componentWillReceiveProps 已被弃用。

2021 年更新

您现在可以使用useEffect hook 以便在状态发生变化时使用回调函数。

【讨论】：

【解决方案2】：

您作为第二个参数传递的回调旨在访问当前状态并返回新状态。您可以创建一个包装函数来为状态更改添加功能，例如：

const onStateChange = (...) => {
    //DO SOMETHING HERE
    this.setState(...);
};

然后，每当您想更改状态时，请使用添加的行为调用此函数。希望这会有所帮助。

【讨论】：

【解决方案3】：

您可以简单地在 react 中使用 componentDidUpdate 生命周期方法，而不是覆盖 setState 的回调以在每次状态更改时执行

componentDidUpdate(prevProps, prevState) {
   //compare this state and prevState and take action here
}

或者你可以写一个函数来执行一个函数和一个setState

_setState = (updatedObj) =>{
     this.setState(updatedObj, this.callback)
}

【讨论】：