javascript - warning.js :45 Warning: setState(. ..):只能更新已安装或正在安装的组件

Question

我是 js 我正在尝试使用 this.setState({但我收到警告。 你们能告诉我为什么我收到以下警告吗 warning.js:45 警告:setState(...):只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了 setState()。这是一个禁止操作。请检查 PerformanceChartNav 组件的代码。

提供以下代码:-

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);

Answer 1

更改:

componentWillMount 

到

componentDidMount

组件必须先安装，然后才能执行设置状态等操作。