gpt4 book ai didi

javascript - Redux 容器无法显示处理 API 调用的 reducer

转载 作者:行者123 更新时间:2023-12-03 01:19:10 25 4
gpt4 key购买 nike

我一直在使用 React、Redux、Redux-promise 和 Axios 构建一个基本的天气应用程序(使用 openweathermap.org 处理当前天气的 API)。如果单击该按钮,控制台上应显示城市(Cecciola)的天气参数。
Action 正确地检索数据,并且由于 Promise,它被作为普通的有效负载传递到 reducer 。数据,而不是 promise 。
然后,负责渲染 city.name 的容器连接到管理天气的 reducer (以便您可以使用 this.props 访问它),但是,如果单击按钮,则 console.log(this.props. tempo....) 表示该对象未定义。为什么?

GitHub Repo link

最佳答案

尝试您的存储库,登录控制台 this.props.tempoceciola 的渲染方法中对我来说效果很好成分。

我看到错误的地方是在你的 renderR() 中功能。您正在尝试使用diocane.city.name但该对象没有“城市”属性。

尝试:<p>{diocane.name}</p>获取名称。

_______ 更新 ________

对您的评论的回应:我从存储库中提取了最新版本,并且当您单击按钮检索数据时,一切似乎都工作正常。正如现在的代码,您正在执行的操作:

console.log(this.props.tempo[0])

因此,在首次加载组件时,props.tempo 中没有任何内容。数组,所以你看到 undefined在控制台中。当您单击该按钮时,数组中现在有一个对象,并且该日志语句可以正常工作。

我改变了你的render()方法:

render() {
if (this.props.tempo.length > 0) {
console.log("TEMPO", this.props.tempo[0])
console.log("ID", this.props.tempo[0].id)
}
return (
<div>
{this.props.tempo.map(t => {
return <div key={t.id}>{t.name}: {t.main.temp} </div>
})}
</div>
);
}

它会记录出预期的信息。您只需要在尝试访问 tempo 属性之前确认数组中包含某些内容即可。然后,当您这样做时,请确保您正在访问内部的单个对象。我在 return() 中展示了一个例子上面的方法:使用 map迭代并返回 <div> 的新数组带有速度对象信息的元素。

关于javascript - Redux 容器无法显示处理 API 调用的 reducer ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51839630/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com