如何从父母向孩子发送条件道具。 （如果只有数组不为空，则发送）

Question

我想显示从Choices组件的API中获得的JSON数据。

class ShowChoice extends React.Component{
    // var out=this.props.output Why is it not working here? Why is it showing error?
    render() {
        var out=this.props.output // Why is it not working above render????
        return(
            <div>Render out[0].id here </div>
        )
    }
}

output是具有

的数组

output =[{'id':1}, {'choice_text':'some choice'}]

问题是，每当我启动应用程序或应用程序重新渲染自身时，输出都未定义，并且会抛出错误，提示

TypeError: Cannot read property 'id' of undefined

console.log(out[0].id)

1. 我该如何解决这个问题？
2. 我想如果只要输出有一定长度就可以以某种方式发送道具，那么我就可以解决问题
3. 为什么注释行var out=this.props.output在render上方不起作用？

Answer 1

在呈现任何内容之前，您必须首先检查是否定义了 输出 。 像

class ShowChoice extends React.Component{

    render() {
        const { output } = this.props
        if (!output) {
           return null;
        }
        return(
            <div>Render output[0].id here </div>
        )
    }
}

Answer 2

以上const indents = Object.keys(props.coursevals).map(key => ( <ListItem key={index} button selected={selectedIndex === index} onClick={() => handleListItemClick(index)} className={classes.ListItem} > ... 无法正常工作

var out=this.props.output;