Question

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

GitHub Repo link

Answer 1

尝试使用存储库，登录到控制台this.props.tempo在ceciola组件的render方法中对我来说很好。

我看到错误的地方是您的renderR()函数中。您正在尝试使用diocane.city.name，但是该对象没有'city'属性。

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

_______更新________

回复您的评论：我从存储库中提取了最新版本，再次，当您单击按钮以检索数据时，一切似乎都正常。就像现在的代码一样，您正在执行以下操作：

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

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

我将您的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>
    );
}

它注销了预期的信息。您只需要在尝试访问速度道具之前先确认其是否在数组中。然后，在执行此操作时，请确保您正在访问其中的单个对象。我在上面的return()方法中展示了一个示例：使用map迭代并返回带有速度对象信息的<div>元素的新数组。

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

1 个答案: