Javascript 如何避免componentDidCatch（）多次触发某些内容？

如果一个组件在渲染过程中出现10次错误，

componentDidCatch（）

将触发10次相同的错误。目前，我在catch上发出一个API请求来记录错误，但我只希望记录一次错误

我的第一个想法是将我自己的

prevererror

保存在状态中，并检查传递给

componentDidCatch（）

的

错误是否相同。但这不起作用，因为
setState
请求不是即时的。其他一些生命周期事件被传递到最新状态，但这不是。我知道
setState（）
会使用最新状态进行回调，但到那时错误将始终等于
prevError
。我的意思是：

componentDidCatch(error, info) {
    this.setState({ error: true });

    const isNewError = (error.toString() !== this.state.prevError.toString());
    // always true since setState is async
    if (isNewError) {
       logErrorToMyService(error, info); // should only run once
       this.setState({ prevError: error });
    }
}

我也不认为我可以使用
componentdiddupdate（）
，因为它不知道我的错误

我错过什么了吗？我是否只是处理了这个问题，并需要重新处理它（可能将检查移到
logErrorToMyService
中）


我的意思的完整示例：

componentDidCatch(error, info) {
    this.setState({ error: true });

    const isNewError = (error.toString() !== this.state.prevError.toString());
    // always true since setState is async
    if (isNewError) {
       logErrorToMyService(error, info); // should only run once
       this.setState({ prevError: error });
    }
}


const logErrorToMyService=（）=>console.warn（'I应该只运行一次'）；
类ErrorBoundary扩展了React.Component{
状态={
错误：false，
prevError:新错误（），
}
componentDidCatch（错误，信息）{
this.setState（{error:true}）；
//以下代码都不能正常工作
const isNewError=（error.toString（）！==this.state.preverError.toString（））；
//由于setState是异步的，因此始终为true
if（isNewError）{
logErrorToMyService（错误，信息）；//应该只运行一次
this.setState（{prevererror:error}）；
}
}
render（）{
if（this.state.error）{
退回（故意）出毛病的东西。；
}
返回此.props.children；
}  
}
//下面是10个故意有缺陷的组件实例
常量BuggyComponent=（）=>(
{故意抛出.error}
)
常量应用=（）=>(
{[…数组（10）].map（（{，i）=>）}
)
ReactDOM.render(
,
document.getElementById（'root'））
);
在您发布的代码中，
componentDidCatch（）
将在
setstate
回调第一次运行之前快速连续触发十几次。但是
preveror
不一定是
状态的一部分，因为这与组件的外观无关

只需将其实现为类变量，以便同步设置。
然后不要使用状态；将
preveError
实现为类变量。@ChrisG谢谢！成功了。嗯，从来没有想过不使用状态来存储这样的东西。我想知道是否还有其他的事情我应该去做。如果您想将其添加为正式答案，我可以将其标记为已接受。使用
state
应在必要时使React重新呈现，但仅在必要时。因此，对
render（）
有影响的所有变量都应该是
状态的一部分。其他一切都可以作为类变量实现，甚至可以在类之外实现。