React中父组件ajax请求后如何把复杂结构的数据结构返回给子组件

Question

//父组件
class Parent extends React.Component{
    ...
    this.state = {
        fetchData: {}
    };
    componentDidMount(){
        ajax(){
            ...
            success:{
                this.setState({
                    fetchData:ajaxData
                });
            }
        }
    }
    render(){
        return (
            <Son data={this.state.fetchData}></Son>
        );
    }
}

//子组件
function Son({ data }){
    return (
        <div>{data.array[0].name}</div> //问题就出在这里，因为刚渲染的时候data的默认值是空{}，肯定会报错找不到array[0]这些值
    );
}

子组件属性的数据结构是个复杂的数据结构，除非我在设置data的defaultProp时把里面要用到数据结构都列出来，但是好麻烦，有没有更简单的办法解决这个问题呢？我想了下，我就是想在父组件ajax请求成功后，再把请求后的数据传给子组件属性中，但是怎么实现呢？
另外我还尝试过不用无状态组件，然后用各种生命周期，都失败了

Answer 1

请求数据回来之后再加载子组件呢？

    this.state = {
        fetchData: ''
    }
    ...
    render(){
        return (
            {this.state.fetchData && <Son data={this.state.fetchData}></Son>}
        );
    }

Answer 2

不可以在父组件的render里做个if判断嘛？没有数据就render一个空<div>，有数据就render <Son data={this.state.complexData}/>

Answer 3

同构应用解决，给个思路，直接在服务端获取数据，传给客户端，你的那个子组件就可以直接使用数据了