map不是array React上的函数

Question

我得到一个错误，地图不是我的数据上的函数。我从一个返回对象数组的api中得到一个响应。当我不刷新页面时，我可以查看显示的结果，甚至可以导航到单独查看它们(当我点击"查看更多"时)。但是，当我刷新页面时，我得到Map不是一个函数的错误在我的道具上，即使结果显示在控制台日志中。

我在这里迷路了，不明白为什么它会这样。

componentDidMount() {
this.props.getCanyons();
}
render() {
const { canyons } = this.props;
console.log(canyons)
return (
<section>

{canyons.map(canyon => (
<section key={canyon.canyon_id}>
<h3>{canyon.canyon_name}</h3>
<img src={canyon.canyon_pic} alt={canyon.canyon_name} />
<Link key={canyon.canyon_id} to={`/canyon/${canyon.canyon_id}`}>
<button>See More</button>
</Link>
</section>
))}
</section>
);
}
}

Answer 1

当api失败或有延迟时间获得响应时，可能是undefined。这种检查可以防止你发生这样的问题。

return (  
{canyons && canyons.map(canyon => (
...skipped code
))}
)

Typescript提供了在尝试访问相关的Object类型变量之前添加?的特性

//In typescript
{canyons?.map(canyon => (
...skipped code
))}

Answer 2

componentDidMount() {
this.props.getCanyons();
}
render() {
const { canyons } = this.props;
console.log(canyons)
return (
<section>

{   canyons !== '' || canyons.length > 0 ? //change here
canyons.map(canyon => (
<section key={canyon.canyon_id}>
<h3>{canyon.canyon_name}</h3>
<img src={canyon.canyon_pic} alt={canyon.canyon_name} />
<Link key={canyon.canyon_id} to={`/canyon/${canyon.canyon_id}`}>
<button>See More</button>
</Link>
</section>
))
:
null
}
</section>
);
}
}

请跟随变化。它应该适合你…

Answer 3

许多浏览器在使用console.log()时提供实时视图。当请求未完成时，"峡谷"是未定义的。使用

console.log(JSON.parse(JSON.stringify(obj)))

对于这个问题，尝试设置默认值或先检查变量