React组件中如何访问WeatherAPI的逐小时预报数据

问题根源 #

你代码里有三个关键错误：

• forecastday是数组类型（从数据结构能看到它被包裹在[]中），不能直接通过.hour访问，得先指定数组索引（比如取当天预报用forecastday[0]）
• JSX里渲染变量要加花括号{}，你写的(hour.temp_c)只会输出字符串，不会渲染实际温度值
• Slider组件的位置错误，应该用Slider包裹所有小时项，而非给每个小时单独生成一个Slider

修正后的代码 #

<Box>
  <Slider {...settings}>
    {weather?.forecast?.forecastday[0]?.hour.map((hour) => (
      <div key={hour.time}>
        <p>{hour.time}</p>
        <p>{hour.condition.text}</p>
        <p>{hour.temp_c}°C</p>
      </div>
    ))}
  </Slider>
</Box>

额外说明 #

• 用可选链?.处理数据未加载的情况，避免页面报错
• 如果要展示多天的逐小时预报，需要先遍历forecastday数组，再遍历每个day下的hour列表
• 从数据结构来看，天气状况文本存储在hour.condition.text字段中，直接读取即可展示

内容的提问来源于stack exchange，提问作者Njoroge Brian