react 異步加載數據時的渲染問題

當數據須要異步加載時render獲取不到數據可能會報一些錯誤，此時須要在render函數中加一個判斷

componentWillMount (){
        axios.get("http://127.0.0.1:8088/user/userlist").then(res =>{
            this.setState({
                dataSource:res.data.data,
                haveData:true
            })

        })
    }
    render() {
     /* 注意下面這個三目運算符，執行到render時，state對象的haveData爲false，
     因此此時頁面展現  loading，當異步獲取數據成功時，
     haveData值爲true，此時又一次執行render，
     此時將須要的數據傳給視圖，正確展現到頁面 */
        return (
            !this.state.haveData?"loading":(
                <Table columns={columns} dataSource={this.state.dataSource} />
            )

        )

    }