Warning.js：45警告：setState（...）：只能更新已安装或装配的组件 [英] Warning.js:45 Warning: setState(...): Can only update a mounted or mounting component
问题描述
我是新来的 js 我试图使用this.setState（{
，但我得到一个警告。
你能告诉我们我为什么会收到以下警告
warning.js：45警告：setState（...）：只能更新挂载或挂载的组件，这通常意味着您在卸载的组件上调用了setState（）。请检查PerformanceChartNav组件的代码。
提供以下代码： - $ / $>
<$ p $
从'react-redux'导入{connect};
从'moment'导入时刻;
从'./jump-player-tab-content'导入高度;
从'./jump-player-pane-content'导入权重;
从'./running-setup'导入AccountSetupTab ';
从'./balance-portfolio';
导入BalancePortfolio FirstTimeTab扩展了React.Component {
构造函数（道具）{
super（道具）;
this.state = {
runningSetup：'jump-player-active'，
投资购买：'sports-invest-ico'，
balancePortfolio：'sports-balance-ico'，
performance：'sports-perf-ico '，
selectedTab：0
};
$ b componentWillMount（）{
让{sportsPhone，runningSnapshot，runningPositions，runningPerformance} = this.props;
let managedProductActivationDate = this.props.sportsPhone.managedProductActivationDate;
let1Day = moment（）。subtract（1，'days'）。format（'YYYY-MM-DD'）;
let isActive = managedProductActivationDate< past1Day;
if（sportsPhone！==''&&！isActive）{
this.setState（{
selectedTab：0，
runningSetup：sports- setup-ico jump-player-active ft-active-tab
}）;
} else if（isActive）{
this.setState（{
selectedTab：1，
runningSetup：sports-setup-ico ft-prev-day，
投资购买：体育投资ico跳跃运动员激活的ft-active-tab
}）;
this.setState（{
selectedTab：2，
runningSetup：
} else if（runningSnapshot！== undefined&&; runningPositions.positions.length> 0） ft-prev-day，
投资购买：ft-prev-day，
balancePortfolio：sports-balance-ico jump-player-active ft-active-tab
} ）;
} else if（runningPerformance！== undefined）{
this.setState（{
selectedTab：3，
runningSetup：dft-prev-day，
投资购买：ft-prev-day，
balancePortfolio：ft-prev-day，
表现：sports-perf-ico跳跃运动员激活的ft-active-tab
}）;
回调（selectedTab）{
if（this.state.selectedTab！== selectedTab）{
switch（this.state。选择）{
案例0：
let temp = this.state.runningSetup.substring（32，45）;
this.setState（{runningSetup：temp}）;
休息;
案例1：
let temp1 = this.state.runningSetup.substring（33，46）;
this.setState（{runningSetup：temp}）;
休息;
案例2：
let tem2 = this.state.runningSetup.substring（34，47）;
this.setState（{runningSetup：temp}）;
休息;
案例3：
let temp3 = this.state.runningSetup.substring（31，41）;
this.setState（{runningSetup：temp}）;
休息;
switch（selected）{
/ * case 0：
let temp = this.state.runningSetup +'ft-active-tab';
this.setState（{runningSetup：temp}）;
break; * /
case 0：
let temp4 = this.state.runningSetup.substring（0，32）;
this.setState（{runningSetup：temp}）;
休息;
案例1：
let temp5 = this.state.runningSetup.substring（0，33）;
this.setState（{runningSetup：temp}）;
休息;
情况2：
让temp6 = this.state.runningSetup.substring（0，34）;
this.setState（{runningSetup：temp}）;
休息;
案例3：
let temp7 = this.state.runningSetup.substring（0，31）;
this.setState（{runningSetup：temp}）;
休息;
render（）{
//需要完成的服务更改
let isActiveSecond = managedProductActivationDate< past1Day;
//让{sportsPhone，runningSnapshot，runningPositions，runningPerformance} = this.props;
let managedProductActivationDate = this.props.sportsPhone.managedProductActivationDate;
let1Day = moment（）。subtract（1，'days'）。format（'YYYY-MM-DD'）;
// let isActive = managedProductActivationDate< past1Day;
// let selectedTab = 0;
返回（
< AccountSetupTab sportsPhone = {this.props.sportsPhone} isActiveSecond = {this.props.isActive } />
< / div>
< / weight>
< weight label =投资购买subtitle =约会第3天liClass = {this.state。
< div className =sports-tab-content>
< p className =sports-large-text ft-day1 ft-day2>
一旦我们验证了您的存款并且您的投放资金已经获得资助，我们就会开始为您的投资组合购买ETF。
< / p>
< / div>
< / weig HT>
< BalancePortfolio portfolio = {this.props.portfolio} />
< / div>
< / weight>
< / p>
< / div>
< / weight>
< / height>
）;
}
}
FirstTimeTab.propTypes = {
sportsPhone：React.PropTypes.object.isRequired，
runningSnapshot：React.PropTypes.object.isRequired ，
runningPositions：React.PropTypes.object.isRequired，
runningPerformance：React.PropTypes.object.isRequired，
portfolio：React.PropTypes.object.isRequired，
managedProductActivationDate：React .PropTypes.object.isRequired
};
function select（state）{
return {
sportsPhone：state.sportsPhone，
runningSnapshot：React.PropTypes.object.isRequired，
runningPositions： React.PropTypes.object.isRequired，
runningPerformance：React.PropTypes.object.isRequired，
portfolio：state.portfolio，
past1Day：React.PropTypes.number，
isActive： React.PropTypes.object.isRequired
};
}
导出默认连接（select）（FirstTimeTab）;
更改：
componentWillMount
到
componentDidMount
组件必须先安装，然后才能执行设置状态。
I am new to js I am trying to use this.setState({
but I am getting a warning.
can you guys tell me why I am getting the below warning
warning.js:45 Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the PerformanceChartNav component.
Providing code below:-
import React from 'react';
import {connect} from 'react-redux';
import moment from 'moment';
import height from './jump-player-tab-content';
import weight from './jump-player-pane-content';
import AccountSetupTab from './running-setup';
import BalancePortfolio from './balance-portfolio';
class FirstTimeTab extends React.Component {
constructor(props) {
super(props);
this.state = {
runningSetup: 'jump-player-active',
investmentPurchase: 'sports-invest-ico',
balancePortfolio: 'sports-balance-ico',
performance: 'sports-perf-ico',
selectedTab: 0
};
}
componentWillMount() {
let {sportsPhone, runningSnapshot, runningPositions, runningPerformance} = this.props;
let managedProductActivationDate = this.props.sportsPhone.managedProductActivationDate;
let past1Day = moment().subtract(1, 'days').format('YYYY-MM-DD');
let isActive= managedProductActivationDate < past1Day;
if(sportsPhone !== '' && !isActive) {
this.setState({
selectedTab: 0,
runningSetup: "sports-setup-ico jump-player-active ft-active-tab"
});
}else if(isActive) {
this.setState({
selectedTab: 1,
runningSetup: "sports-setup-ico ft-prev-day",
investmentPurchase: "sports-invest-ico jump-player-active ft-active-tab"
});
}else if(runningSnapshot !== undefined && runningPositions.positions.length > 0 ) {
this.setState({
selectedTab: 2,
runningSetup: "ft-prev-day",
investmentPurchase: "ft-prev-day",
balancePortfolio: "sports-balance-ico jump-player-active ft-active-tab"
});
}else if(runningPerformance !== undefined ) {
this.setState({
selectedTab: 3,
runningSetup: "dft-prev-day",
investmentPurchase: "ft-prev-day",
balancePortfolio: "ft-prev-day",
performance: "sports-perf-ico jump-player-active ft-active-tab"
});
}
}
callback(selectedTab){
if (this.state.selectedTab !== selectedTab) {
switch(this.state.selected) {
case 0:
let temp = this.state.runningSetup.substring(32, 45);
this.setState({runningSetup: temp});
break;
case 1:
let temp1 = this.state.runningSetup.substring(33, 46);
this.setState({runningSetup: temp});
break;
case 2:
let tem2 = this.state.runningSetup.substring(34, 47);
this.setState({runningSetup: temp});
break;
case 3:
let temp3 = this.state.runningSetup.substring(31, 41);
this.setState({runningSetup: temp});
break;
}
switch(selected) {
/*case 0:
let temp = this.state.runningSetup+' ft-active-tab';
this.setState({runningSetup: temp});
break;*/
case 0:
let temp4 = this.state.runningSetup.substring(0, 32);
this.setState({runningSetup: temp});
break;
case 1:
let temp5 = this.state.runningSetup.substring(0, 33);
this.setState({runningSetup: temp});
break;
case 2:
let temp6 = this.state.runningSetup.substring(0, 34);
this.setState({runningSetup: temp});
break;
case 3:
let temp7 = this.state.runningSetup.substring(0, 31);
this.setState({runningSetup: temp});
break;
}
}
}
render () {
// service changes need to be done
let isActiveSecond= managedProductActivationDate < past1Day;
// let {sportsPhone, runningSnapshot, runningPositions, runningPerformance} = this.props;
let managedProductActivationDate = this.props.sportsPhone.managedProductActivationDate;
let past1Day = moment().subtract(1, 'days').format('YYYY-MM-DD');
// let isActive= managedProductActivationDate < past1Day;
//let selectedTab = 0;
return (
<height selected={ this.state.selectedTab}>
<weight label="Account Setup" subtitle="Days 1 and 2" liClass={ this.state.runningSetup}>
<div>
<AccountSetupTab sportsPhone={this.props.sportsPhone} isActiveSecond={this.props.isActive} />
</div>
</weight>
<weight label="Investments Purchase" subtitle="Approx. Day 3" liClass={this.state.investmentPurchase}>
<div className="sports-tab-content">
<p className="sports-large-text ft-day1 ft-day2">
Once we verify your deposit and your running has been funded, we’ll start purchasing ETFs for your portfolio.
</p>
</div>
</weight>
<weight label="Balance and Portfolio" subtitle="Approx. Day 4" liClass={this.state.balancePortfolio}>
<div >
<BalancePortfolio portfolio={this.props.portfolio} />
</div>
</weight>
<weight label="Performance" subtitle="Approx. Day 5" liClass={this.state.performance}>
<div className="sports-tab-content">
<p className="sports-large-text ft-day1 ft-day2 ft-day3 ft-day4">
You’ll be able to monitor your portfolio as it responds to daily market changes.
</p>
</div>
</weight>
</height>
);
}
}
FirstTimeTab.propTypes = {
sportsPhone: React.PropTypes.object.isRequired,
runningSnapshot: React.PropTypes.object.isRequired,
runningPositions: React.PropTypes.object.isRequired,
runningPerformance: React.PropTypes.object.isRequired,
portfolio: React.PropTypes.object.isRequired,
managedProductActivationDate: React.PropTypes.object.isRequired
};
function select(state) {
return {
sportsPhone: state.sportsPhone,
runningSnapshot: React.PropTypes.object.isRequired,
runningPositions: React.PropTypes.object.isRequired,
runningPerformance: React.PropTypes.object.isRequired,
portfolio: state.portfolio,
past1Day: React.PropTypes.number,
isActive: React.PropTypes.object.isRequired
};
}
export default connect(select)(FirstTimeTab);
Change:
componentWillMount
to
componentDidMount
Components have to be mounted before they can do stuff like set state.
这篇关于Warning.js：45警告：setState（...）：只能更新已安装或装配的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
