Reactjs 读取属性'；地图'；未定义的

我遵循了reactJS和a的教程，我对“地图”有一些问题。 TypeError:无法读取未定义的属性“map”

class GoalList extends Component{
componentDidMount(){
    goalRef.on('value', snap=>{
        let goals=[];
        snap.forEach(goal =>{
            const {email, title}=goal.val();
            goals.push({email, title});
        });
        console.log('goals', goals);
        this.props.setGoals(goals);
    })
}
render(){
    console.log('this.props.goals', this.props.goals);
    return(
        <div>
            {this.props.goals.map((goal, index) => {
                return (
                    <GoalItem key={index} goal={goal} />
                )})}
        </div>
    )
}

类GoalList扩展组件{
componentDidMount（）{
goalRef.on（'value'，snap=>{
让目标=[]；
snap.forEach（目标=>{
const{email，title}=goal.val（）；
目标推送（{email，title}）；
});
console.log（'goals'，goals）；
this.props.setGoals（goals）；
})
}
render（）{
log（'this.props.goals'，this.props.goals）；
返回(
{this.props.goals.map（（目标，索引）=>{
返回(
)})}
)
}

正如@developer在他的评论中所说，您的问题是您的代码抛出了一个错误，因为

这个.props.goals

在当时没有定义，您不能在

未定义的
上进行
映射

您可以通过提供默认设置轻松解决此问题：

render(){
    const { goals = [] } = this.props;
    return(
        <div>
            {goals.map((goal, index) => {
                return (
                    <GoalItem key={index} goal={goal} />
                )})}
        </div>
    )
}

怀疑this.props.goals尚未定义或为null，请尝试更改：检查未定义/null:this.props.goals&&this.props.goals.map
goalRef.on（'value'，snap=>{
这看起来非常异步。因此，当您的渲染方法第一次运行时，可能还没有定义
This.props.goals
。如果您正在使用redux，请将目标设置为初始状态内的空数组，或者检查
This.props.goals
是否直接在
render
内，请确保“This.props.goals”是数组。可能当时尚未定义它（“未定义”）。您可以在之前提供检查，例如：if（this.props.goals instanceof array）{this.props.goals.map（）…}
static defaultProps = {
  goals: []
}