React组件不呈现来自父级的道具

Question

 class CyInfo extends Component {

    foo(){
        console.log(this.props.id);
        return getAttributes(this.props.id)
    }

    render() {
        return ( <Info data = {this.foo()}> </Info>)
    }
}

此父级接收"props.id"并将数据值传递给getAttributes()返回的子级.

export default class Info extends Component {
    constructor(props){
        super(props)
    }

    /*componentWillReceiveProps(nextProps){
        console.log(nextProps);
    */

    render() {
        console.log(this.props.data);
        return (
            <div id="info">{this.props.data}</div>
        )
    }
}

在孩子上我可以在控制台和componentWillReceiveProps中看到道具值.但是数组不能渲染.我尝试使用react-devtool.在react-devtool道具似乎传递了孩子而不是渲染.有趣的是,当我改变一些数组的元素数组时,react-devtool正在渲染.

我做错了什么.

编辑:[React-Devtool截图] [1]

我编辑了react-devtool截图.看似道具,但组件只呈现初始值.在屏幕截图控制台错误是favicon只是忽略这一点

EDIT2:控制台打印道具数组

编辑3: JSON.stringify(this.props.data)

Answer 1

这些道具来自函数（getattributes），它是异步调用的方法，当该道具传递给子级时，不会呈现。我直接在父子中调用异步方法，并在 componentWillReceiveProps 中使用回调设置状态：

componentWillReceiveProps(nextProps){
    self = this;
    AsyncFunc(nextProps.id ,(error, result) => {
        self.setState({data:result})
    });
}

并渲染为

    return (<div id="info">
        {Array.isArray(this.state.data) && this.state.data.map((data) => {
            return <div key={data._id}>{data.class}{data.predicate}{data.yuklem}</div>
        })}</div>
    )