当数据需要异步加载时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} />
        )

    )
}

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/2632