javascript - 有没有办法在任何未安装的组件上普遍取消对 setstate 的所有调用或隐藏尝试它产生的错误？

Question

我首先要说我实际上并没有试图隐藏错误，我要修复它们，但我需要知道它是否可能。

我正在用.net 后端重写一个反应项目，从框架过渡到核心。

我有两个基本相同的组件（一个在原始项目中，一个在新项目中）。

它们是一种模式，当打开时，会收集并显示一篇文章。如果模态框关闭，则组件将被卸载，并且如果它在返回文章数据之前（使用 fetch），它当前会出错，因为它正在尝试更新已卸载组件的状态。

这种行为是预期的。

在新项目中，我正要添加一个 AbortController 以在需要时中止 fetch 调用，但我注意到在旧项目中，在收集数据之前关闭模式时，不会给我一个错误。组件卸载，然后状态更新，但由于某种原因我没有收到错误。没有跟踪挂载状态的“isMounted”变量，也没有中止控制器。

我在每个相关方法中添加了控制台日志，以确保它在状态更新之前被卸载。

旧项目控制台输出

新项目控制台输出

有什么东西可以隐藏这些错误吗？还是一起阻止行动？

两个项目都使用 react 16，但旧项目在外部引用（https://unpkg.com/react@16/umd/react.development.js），新项目通过 npm（^16.8.6）提供。

这是旧项目的相关代码，因为这是没有产生错误的代码（新项目几乎相同）

componentDidMount() {
    fetch(`{url to get article}`,
        { credentials: "include", headers: { accept: "application/json" } })
        .then(res => res.json())
        .then(gatheredData => this.setState({ gatheredData }))
}

没有componentWillUnmount。

标签： javascriptreactjssetstate

Answer 1

当我无法从组件中删除调用时，我就是这样做的

componentDidMount() {
    this.mounted=true
    fetch(`{url to get article}`,
        { credentials: "include", headers: { accept: "application/json" } })
        .then(res => res.json())
        .then(gatheredData => {
          if (this.mounted) {
            this.setState({ gatheredData })
          }
        })
}

componentWillUnmount() {
    this.mounted=false
}