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

Question

我一直在使用 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

Answer 1

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

我看到错误的地方是在你的 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> 的新数组带有速度对象信息的元素。