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>
        )
    }
}

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

我做错了什么。

编辑：[React-DevTool屏幕截图][1]

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

编辑2：控制台打印道具阵列

编辑3:json.stringify（this.props.data）

Answer 1

由于foo是一个函数，您必须以以下方式传递给子组件：

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

而且，数据是一个数组，您必须使用.map（）呈现，如下所示：

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.map(( element, index ) => {
            console.log(element);
            <span key={index}> {element}</span>})}
           </div>
        )
    }
}

Answer 2

道具来自函数(getattributes)，它是异步调用一个方法，当这个道具传递给子级时，没有呈现。我直接在父子级中调用async方法，并在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>
    )