当使用ComponentDidMount（）时我发现了这个错误：无法调用setState [英] When use ComponentDidMount() I found this error : Can't call setState
问题描述
我发现了这个错误：
无法在卸载的组件上调用setState（或forceUpdate）。这是一个无操作，但它表示应用程序中存在内存泄漏。要修复，取消componentWillUnmount方法中的所有订阅和异步任务。
Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
上下文：当我连接时，我在主页，这个页面不包含breadCrumb，但如果我继续 CampaignPage （也是组件的名称），我有 BreadCrumb （组件名称）我发现了这个错误。
Context : When I'm connected, I'm on the homepage, this page not contain the breadCrumb, but If I go on CampaignPage (also the name of the component), I have the BreadCrumb (Component name) I found this error.
在其他帖子上我可以看到，他们说可能在 ComponentWillMount 上异步出现问题，但我认为我的问题是不同，我找不到解决方案。
On other post what I could see, they said probably problem on asynchronously on ComponentWillMount but I think my problem is different and I can't find a solution.
我的代码看起来像这样：
My code look like that :
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import classnames from 'classnames';
import objectAssign from 'object-assign';
import { withRouter } from 'react-router';
import {
BREADCRUMBS_ROUTES,
BREADCRUMBS_ROUTES_FOR_ID,
BREADCRUMBS_ENDPOINT
} from 'constants';
import { getEntityById, setUpdatedBreadcrumbs } from 'actions/breadcrumbs';
import style from './style.scss';
class Breadcrumbs extends Component {
constructor(props) {
super(props);
this.state = {
breadcrumbs: [],
names: {}
};
this.setBreadcrumbs = this.setBreadcrumbs.bind(this);
this.loadEntityNameById = this.loadEntityNameById.bind(this);
}
componentWillMount() {
this.setBreadcrumbs();
}
componentWillReceiveProps(nextProps) {
const { isWillUpdate: newIsWillUpdate } = nextProps;
const { isWillUpdate, saveUpdatedBreadcrumbs } = this.props;
if (isWillUpdate === false && newIsWillUpdate === true) {
this.setBreadcrumbs();
saveUpdatedBreadcrumbs();
}
}
setBreadcrumbs() {
const { params, path } = this.props.match;
let currentPath = '';
const pathSplitedAndExtendet = path.split('/')
.filter(item => !!item)
.map(item => {
if (item[0] === ':' && item.slice(1) !== 'adPage') {
const parameterName = item.slice(1);
this.loadEntityNameById(
parameterName,
params[parameterName]
);
return {
route: `/${params[parameterName]}${BREADCRUMBS_ROUTES_FOR_ID[parameterName]}`,
parameter: parameterName
};
}
return {
route: `/${item}`,
parameter: ''
};
});
const breadcrumbs = pathSplitedAndExtendet
.filter(item => item.parameter !== 'adPage')
.map((item) => {
const indexOfRoute = currentPath.indexOf(item.route);
if (currentPath.slice(indexOfRoute) !== item.route) {
currentPath = `${currentPath}${item.route}`;
}
return ({
...item,
name: BREADCRUMBS_ROUTES[item.route] || '',
route: currentPath
});
});
this.setState({ breadcrumbs });
}
async loadEntityNameById(parameter, id) {
const { loadEntityById } = this.props;
await loadEntityById(BREADCRUMBS_ENDPOINT[parameter], id)
.then((data) => {
this.setState({ names: objectAssign(this.state.names, { [parameter]: { id, name: data.name } }) });
});
}
render() {
const { breadcrumbs, names } = this.state;
const { showBreadcrumbs } = this.props;
return (
<div className={style.breadcrumbs}>
{
showBreadcrumbs && breadcrumbs
.map((item, index) => {
return (
<div
key={`${item.name}--${item.route}--${index}`}
className={classnames(style.bread, index === breadcrumbs.length - 1 ? style.last : null)}
role="link"
tabIndex={-10 - index}
onKeyDown={() => {}}
onClick={item.route ? () => this.props.history.push(item.route) : null}
>
{`${item.name || (names[item.parameter]
? names[item.parameter].name : '...')}
${((breadcrumbs.length > 1) && (index !== breadcrumbs.length - 1)) ? ' >' : ''}
`}
</div>
);
})
}
</div>
);
}
}
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Breadcrumbs));
推荐答案
无法在卸载的组件上调用setState（或forceUpdate）。这是一个无操作，但它表示应用程序中存在内存泄漏。要修复，请取消componentWillUnmount方法中的所有订阅和异步任务。
Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
此错误消息明确指出您的应用程序存在内存泄漏。这里到底发生了什么？
This error message clearly states that your application has memory leak. What's going on here exactly?
好吧，你在 setBreadcrumbs 方法中使用异步操作（loadEntityNameById）。这是在 componentWillMount 和 componentWillReceiveProps 中调用的。这意味着当您从 CampaignPage 组件转到 BreadCrumb 组件时，它将执行异步操作，即。 loadEntityNameById 正在后台运行，只在状态完成后设置状态。但在此之前，您的 BreadCrumb 组件可能已卸载。 react应用程序不允许你更新未安装组件的状态。
Well, you're using async operation (loadEntityNameById) in setBreadcrumbs method. Which is being called in componentWillMount and in componentWillReceiveProps. This means when you go from CampaignPage component to BreadCrumb component, it will do the async operation ie. loadEntityNameById is running in the background which only sets the state once it's finished. But until that time your BreadCrumb component might be unmounted. The react application doesn't allow you to update the state on an unmounted component.
此外，你不应该使用 componentWillMount 方法。请改用 componentDidMount 。
Furthermore, you should not use componentWillMount method at all. Use componentDidMount hook instead.
要解决此问题，您可以设置如下标志：
To fix the issue, what you can do is to set a flag like:
componentDidMount() {
// component is mounted, set the didMount property on BreadCrumb component
// you can use any name instead of didMount what you think is proper
this.didMount = true
// now, you can update the state
if(this.didMount) { // be sure it's not unmounted
this.setState({names: ...})
}
接下来，您应该在卸载组件时清除didMount属性。
Next, you should clear the didMount property when the component is unmounted.
componentWillUnmount() {
this.didMount = false // component is unmounted
这将确保您的应用程序内存不会泄漏。因为，我们在需要时正确设置状态，而不是在不需要时设置状态，并停止不必要的循环。
This will ensure you that your application memory will not be leaked. Because, we properly setting the state when required but not when it doesn't require, and stopping unnecessary loop.
这篇关于当使用ComponentDidMount（）时我发现了这个错误：无法调用setState的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
