反应力componentDidMount

我有以下内容:

import React from 'react';
import axios from 'axios';

class FirstName extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            submitted: false
        };
    }
    getName () {
        var name = this.refs.firstName.value;
        this.setState(function() {
          this.props.action(name);
        });
    }
    handleSubmit (e) {
        e.preventDefault();
        this.setState({ submitted: true }, function() {
            this.props.actionID(2);
            this.props.activeNav('color');
        });
    }
    render () {
        return (
            

                
tell us your first name
                

                    
                    

                        back
                        continue
                    
                
            
  
        );
    }
};

class PickColor extends React.Component {
    backToPrevious (e) {
        e.preventDefault();
        this.props.actionID(1);
        this.props.activeNav('name');
    }
    goToNext (e) {
        e.preventDefault();
        this.props.actionID(3);
        this.props.activeNav('design');
        this.props.displayIconsHolder(true);
    }
    getColorValue(event) {
        this.props.color(event.target.getAttribute("data-color"));
    }
    render () {
        var colors = ['red', 'purple', 'yellow', 'green', 'blue'],
            colorsLink = [];

        colors.forEach(el => { 
            colorsLink.push(

                                    {el}
                            
            );
        });

        return (
            

                

                    {colorsLink}
                
                back
                continue
            
        );
    }
}

class ConfirmSingleIcon extends React.Component {
    goBack () {
        this.props.goBack();
    }
    confirmCaptionandIcon (event) {
        var optionID = event.target.getAttribute("data-option-id"),
            name = event.target.getAttribute("data-option-name");
        this.props.setOptionID(optionID);
        this.props.setIcon(1, name, optionID, false);
    }
    goNext () {
        this.props.goNext();
    }
    render () {
        console.log(this.props.currentState);
        var options = [],
            that = this;
        this.props.iconOptionsList.forEach(function(el){
            options.push(
{el.option}
);
        });
        return (
            

                
Choose your caption
                

                    {this.props.selectedIcon}
                
                

                    {options}
                
                back
                confirm
            
        );
    }
}

class ConfirmCaption extends React.Component {
    handleClick () {
        var currentState = this.props.currentState;
        this.props.setIcon(currentState.icon_ID, currentState.selectedIcon, currentState.option_ID, true);
        this.props.setIconVisiblity(true);
        this.props.setIconListVisiblity(false);
    }
    render () {
        console.log(this.props.currentState);
        return (
            

                
confirm icon and caption
            
        );
    }
}

class ChooseIcon extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            icons: [],
            iconList: true,
            confirmIcon: false,
            confirmCaption: false,
            selectedIconOptions: '',
            icon_ID: '',
            option_ID: '',
            selectedIcon: ''
        };
        this.setOptionID = this.setOptionID.bind(this);

        this.setIconVisiblity = this.setIconVisiblity.bind(this);
        this.setIconListVisiblity = this.setIconListVisiblity.bind(this);
    }
    setOptionID (id) {
        this.setState({ option_ID: id })
    }
    setIconVisiblity (onOff) {
        this.setState({ confirmIcon: onOff })
    }
    setIconListVisiblity (onOff) {
        this.setState({ iconList: onOff })
    }
    componentDidMount() {
        var url = `http://local.tshirt.net/get-options`;
        axios.get(url)
            .then(res => {
                this.setState({ icons:res.data.icons });
        });
    }
    handleClick (event) {
        var iconId = event.target.getAttribute("data-icon-id"),
            that = this;
        this.state.icons.forEach(function(el){
            if(el.id == iconId){
                that.setState(
                    { 
                        confirmIcon: true,
                        iconList: false,
                        selectedIcon: el.name,
                        icon_ID: iconId,
                        selectedIconOptions: el.option
                    }
                );
            }
        });
    }
    goBack () {
        this.setState(
            { 
                confirmIcon: false,
                iconList: true
            }
        );
    }
    goNext () {
        this.setState(
            { 
                confirmIcon: false,
                iconList: false,
                confirmCaption: true
            }
        );
    }
    render () {
        var icons = [];
        this.state.icons.forEach(el => {
            icons.push(
{el.name}
);
        });
        return (
            

                {this.state.iconList ?  : ''}
                {this.state.confirmIcon ?  : ''}

                {this.state.confirmCaption ?  : ''}
            
        );
    }
}

class IconList extends React.Component {
    render () {
        return (
            

                
Pick your icon
                

                    {this.props.icons}
                
            
        );
    }
}

class Forms extends React.Component {
    render () {
        var form;
        switch(this.props.formID) {
            case 1:
                form = 
                break;
            case 2:
                form = 
                break;
            case 3:
                form = 
                break;
        }
        return (
            

                {form}
            
        );
    }
}

export default Forms;

"ChooseIcon"是一个将被使用3次的组件,因此每次我到达它时我需要将其状态恢复,就像它是第一次一样.

理想情况下,我需要每次都进行这个ajax调用:

componentDidMount() {
    var url = `http://local.tshirt.net/get-options`;
    axios.get(url)
        .then(res => {
            this.setState({ icons:res.data.icons });
    });
}

有没有办法从父组件手动调用componentDidMount？

React通过key属性处理组件生命周期.例如:

因此,每当您key(它可以是您喜欢的任何内容,但是唯一的)更改组件将卸载并再次安装时,您可以轻松地控制componentDidMount回调.