反应 safeSetState - 反模式或良好实践？答案

【问题标题】：React safelySetState - Anti pattern or good practice?反应 safeSetState - 反模式或良好实践？
【发布时间】：2018-05-27 21:56:52
【问题描述】：

我最近遇到了

“只能更新一个挂载或挂载的组件。”

在进行异步获取调用后尝试设置状态时出现错误消息。这是因为在 http 响应返回之前组件已卸载。

然后我开始用谷歌搜索，并找到了问题的解决方案。

如果一个变量保持“已挂载”状态，并且每次我想更新状态时，我都会检查该变量怎么办？像 safeSetState() 函数一样？

这是一个例子：

componentDidMount = () => {
  this._mounted = true;
}

componentWillUnmount = () => {
  this._mounted = false; 
}

safelySetState = (obj) => {
  if(this._mounted)
    this.setState(obj);
}

然后，每次我想更新状态时，我都会改用 this.safelySetState() 函数。

所以我的问题是：为什么我不应该这样做？为什么这不是 React 中的默认设置？

【问题讨论】：

要添加到@andriusain 提供的答案，当您调用safelySetState() 并且它没有设置状态时会发生什么？当您的应用突然做出一些意想不到的事情，因为它认为设置了一个实际上没有设置的状态时，您试图“绕过”一个错误，您正在制造其他问题。

标签： reactjs asynchronous react-native fetch fetch-api

【解决方案1】：

我猜测它在 React 中不是默认的，因为它超出了他们的范围。如果无法设置状态，那么他们默默地什么都不做就不会很好。相反，他们抛出一个错误是合乎逻辑的，所以他们让你知道它无法完成，而你想如何处理它取决于你。

此外，出于同样的原因，我也会对始终使用您的函数保持警惕...它会使调试您的应用程序变得有点困难和晦涩...也许您应该在外部实现它，而不是作为一个函数...而是内联与其余代码一起，仅用于真正需要它的边缘情况......或者至少在组件不可用时记录一个警告

【讨论】：