React 组件不渲染来自 parent 的道具

Question

 class CyInfo extends Component {

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

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

this parent 接收 "props.id" 并将数据值传递给 children 由 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 also.But 数组中看到道具值未呈现。我尝试使用 react-devtool。在 react-devtool 道具似乎通过了 children 但没有渲染。有趣的是，在 react-devtool 中，当我更改数组的某些元素时，数组正在渲染。

我做错了什么。

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

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

编辑 2：Console prints props array

编辑 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

正如您提到的 this.data.props returns 一个数组，为了在数组中呈现元素，您需要映射数组元素并检查 data is an array or not 在渲染之前，最初值可能不可用或不是数组

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 && Array.isArray(this.props.data) && this.props.data.map((data, index) => {
                      return <div key={index}>{data}</div>
               })}</div>
        )
    }
}

Answer 3

道具来自函数（getattributes），它调用一个异步方法，当这个道具通过 child 时，没有渲染。我直接在 parent child 中调用异步方法并在 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>
    )

React 组件不渲染来自 parent 的道具

React component not rendering props coming from parent

javascript

reactjs

react-jsx