简体繁体 English

构建一个反应应用程序但收到一条我找不到的错误消息：警告：无法在未安装的组件上执行 React state 更新

[英]Building a react app but getting an error message that I can't locate: Warning: Can't perform a React state update on an unmounted component

原文 2021-03-28 20:48:59 6 1 javascript/ reactjs/ google-chrome-devtools

Im getting the below error and struggling to find the source of the problem.我收到以下错误并努力寻找问题的根源。 Based on the error I see in the console, should I investigate the lines;根据我在控制台中看到的错误，我应该调查这些行吗？ Toolbar.js:15?工具栏.js：15？ is there console suggesting the error is there?是否有控制台提示错误存在？

Also, what is the general origin of this type of issues?另外，这类问题的一般根源是什么？

1 个解决方案

Usually this happens when you try to update the state on a component that is no longer mounted, which is pretty common for asynchronous operations such as timers or requests.当您尝试在不再安装的组件上更新 state 时，通常会发生这种情况，这对于诸如计时器或请求之类的异步操作非常常见。

What some like to do is to set a flag on the componentDidMount() method and unset that flag on the componentWillUnmount() method, a flag commonly named this.mounted .有些人喜欢在 componentDidMount() 方法上设置一个标志，并在componentDidMount() componentWillUnmount()上取消设置该标志，这个标志通常命名为this.mounted 。 With this, you can verify the state of your component before you call the setState() and make sure it is only called when the component is still mounted.有了这个，您可以在调用setState()之前验证组件的 state 并确保仅在组件仍然挂载时才调用它。