ReactJS的loading界面不能正常显示

Question

先贴一下我的代码

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data:"",
            loading:true
        };
    }

    componentDidMount() {
        //ajax请求数据
        this.setState({loading:false});
    }

        render()
        {
            const loadingstyle = {
                textAlign: 'center',
                lineHeight:'60px',
                marginTop:'95px'
            };
            if(this.state.loading)
            {
                return(
                    <div style={loadingstyle}>
                         //Loading code
                    </div>
                )
            }
            else {
                return (
                    <MainPanel data={this.state.data} />
                )
            }
        }

}

我的想法是在componentDidMount中执行ajax请求数据期间显示loading界面，在请求数据成功（或者是失败）以后，显示Mainpanel界面信息。但是当我进行调试的时候，直接就进入到Mainpanel，没有显示loading界面。

PS：loading界面的代码没有问题（我注释掉this.setState({loading:false});以后会一直处于loading界面）

Answer 1

你在ajax里面，请求成功后调this.setState({ loading:false })