React 在状态中存储和访问数据

Question

我是 Web 开发的新手，我正在努力提高我的 React 技能。我正在尝试使用 OpenWeatherMap API 制作一个简单的天气应用程序。我想将响应存储在状态中，这样我就不必多次调用 API.

      useEffect(() => {
    let API = "url";
    
    axios.get(API).then(res => {    
      setWeather(res.data);
    }).catch(err => {
      console.log(err);
    });
  }, [])

我可以使用上面的代码成功地将我的响应存储在状态中。但是，当我尝试访问状态中的嵌套数据时，React 无法使用点表示法找到 'data' 之外的任何内容。这是我存储在状态中的响应示例：

    {
  "lat": 33.44,
  "lon": -94.04,
  "timezone": "America/Chicago",
  "timezone_offset": -21600,
  "current": {
    "temp": 284.07,
    "pressure": 1019,
    "humidity": 62,
    "clouds": 0,
    "wind_speed": 6,
    "wind_deg": 300,
    "weather": [
      {
        "id": 500,
        "main": "Rain",
        "description": "light rain",
        "icon": "10d"
      }
    ]

如果我 console.log(weatherData.current) 上面的代码就是我得到的。这很好，除了当我尝试通过输入“weatherData.current.weather[0].main”访问底部的 'weather' 时，控制台崩溃并显示“无法读取未定义的属性（读取天气）”。

我在想我没有正确存储我的 API 响应状态。我可以记录“weatherData.current”并得到一个对象，但我不能再深入了。

我确定我错过了一个基本步骤，但非常感谢任何帮助。我已经搜索其他帖子几个小时了，但我还没有看到任何其他帖子有这个问题。我开始梦想 Javascript，这让我发疯。

Answer 1

天气对象是一个对象数组

示例：

var weatherDetails = Object.values(weatherData.current.weather)[0]

然后您可以通过以下方式访问此数据：

console.log(weatherDetails.main)
console.log(weatherDetails.id)
console.log(weatherDetails.description)
console.log(weatherDetails.icon)

如果你想使用点符号，你可以将这个结果存储在它自己的状态中：

setWeatherDetails(Object.values(res.data.current.weather)[0]));

React 在状态中存储和访问数据

React store and access data in state

arrays

api

json

object

reactjs