如何修复'无法对未安装的组件执行 React 状态更新”错误？

识别有问题的组件

浏览器控制台中提供的堆栈跟踪指示负责状态更新冲突的组件。堆栈跟踪中的每一行代表一个函数调用，括号中提到了组件名称或类构造函数：

• in TextLayerInternal (由 Context.Consumer 创建)
• in TextLayer (由 PageInternal 创建）

这表明 TextLayer 组件正在尝试更新其

解决状态更新错误

要解决此问题，您应该在组件卸载之前验证所有异步操作是否已取消或完成在组件WillUnmount中。在您的情况下，这涉及处理可限制函数 setDivSizeThrottleable。

修订后的代码

在修订后的 Book 组件中，您进行了以下更改：

• 使用以下方法将 setDivSizeThrottleable 转换为可取消函数
• 在componentWillUnmount中添加了清理函数，用于取消throttleable函数。

class Book extends React.Component {
  setDivSizeThrottleable: ((() => void) & Cancelable) | undefined;
  ...

  componentDidMount = () => {
    this.setDivSizeThrottleable = throttle(
      () => {
        this.setState({
          pdfWidth: this.pdfWrapper!.getBoundingClientRect().width - 5,
        });
      },
      500,
    );

    this.setDivSizeThrottleable();
    window.addEventListener("resize", this.setDivSizeThrottleable);
  };

  componentWillUnmount = () => {
    window.removeEventListener("resize", this.setDivSizeThrottleable!);
    this.setDivSizeThrottleable!.cancel();
    this.setDivSizeThrottleable = undefined;
  };

通过正确处理throttleable函数的取消，可以防止状态更新冲突并解决“无法在未安装的组件上执行 React 状态更新”错误。

以上是如何修复'无法对未安装的组件执行 React 状态更新”错误？的详细内容。更多信息请关注PHP中文网其他相关文章！