react请求到数据后...

Question

先上代码：
父组件：

import React,{Component} from 'react'

export default class Father extends Component { 
    constructor(props){
        super(props)
        this.state={
            role: {}
        }
    } 

    componentDidMount() {
        fetch("xxxx").then(res=>{
            this.setState({
                role:res.data.role //获取数据   
            })
        })
    }

     render(){
        return(
            <div>
                <Child role={this.state.role} />  //将数据传给子组件
            </div>
        )
    } 

}

上面是父组件的代码，子组件要通过this.props.role.info.roleName来获取roleName显示在页面上。
问题来了：
组件第一次render的时候，数据还没有请求过来，此时子组件获取的其实是默认的空对象{}，里面不存在info，更别说roleName了，这时就会导致浏览器报错。
这种情况应该如何处理？

Answer 1

没有特殊需求的话可以把ajax放到componentWillMount周期。

如果非的是componentDidMount的话，可以给子组件赋值一个defaultProps。

Answer 2

加个loading动画

import React,{Component} from 'react'

export default class Father extends Component { 
    constructor(props){
        super(props)
        this.state={
            role: {},
            loading: true
        }
    } 

    componentDidMount() {
        fetch("xxxx").then(res=>{
            this.setState({
                role:res.data.role, //获取数据
                loading:false   
            })
        })
    }

     render(){
         if(loading){
             return (
                 <div>loading</div>
             )
         }
        return(
            <div>
                <Child role={this.state.role} />  //将数据传给子组件
            </div>
        )
    } 

}

Answer 3

在子组件加个if判断就好了，或者使用组件的defaultProps给一个默认值

Answer 4

react建议请求ajax都放在componentdidMount这个生命周期内，第一次渲染肯定是一个空的对象！所以你在用数据的时候进行处理一下，例如 {onj.roleName ? onj.roleName : '' }

Answer 5

render(){
        return(
            <div>
                {this.state.role &&
                    <Child role={this.state.role} /> 
                }
            </div>
        )
    }