React Native中API状态渲染问题：天气数据显示异常

核心问题分析 #

1. 初始State类型错误+空值未处理
   你把clima的初始值设成了数组[]，但OpenWeatherMap返回的是对象。而且组件第一次渲染时API请求还没完成，clima还是初始值，直接访问clima.wind.speed自然会报错——数组里根本没有wind属性。

2. let变量无法跨渲染保存值
   你用let声明的那些变量（比如humidity），每次组件重新渲染都会被重新初始化。useEffect是异步执行的，组件第一次渲染时外部的console.log(humidity)会先执行，这时候变量还没被赋值，所以打印undefined。就算后面赋值了，组件下次渲染时这些变量又会变回undefined。

具体修复步骤 #

1. 修正初始State

把clima的初始值改成null或者空对象{}，因为API返回的是对象：

const [clima, setClima] = useState(null);

2. 渲染时做空值检查

用可选链操作符?.避免空值报错，或者加条件渲染：

// 方式1：可选链
<Text>{clima?.wind?.speed}</Text>

// 方式2：条件渲染，还能加加载提示
{clima ? <Text>{clima.wind.speed}</Text> : <Text>加载中...</Text>}

3. 不要用let存API数据，直接从State取

没必要单独声明let变量，需要用数据时直接从clima里读取就行，比如要打印湿度可以写clima?.main?.humidity。如果非要单独存，就用额外的State，而不是let：

// 比如单独存风速
const [speed, setSpeed] = useState(null);
// 在useEffect里赋值
setSpeed(data.wind.speed);

4. 修复API地址里的item.city问题

你代码里的item.city没定义，应该是从路由参数里取的，比如route.params.item.city，不然API请求会报错：

const api = `https://api.openweathermap.org/data/2.5/weather?q=${route.params.item.city}&units=metric&appid=${apikeyWeather}&lang=es`;

5. 完整修复后的代码示例

import { View, StyleSheet } from "react-native";
import React, { useState, useEffect } from "react";
import { Text } from "react-native-elements";

export const ViewPlace = ({ route }) => {
  const [clima, setClima] = useState(null);
  const apikeyWeather = "a0d96ca4ea71b0ef8a8a2d04132b3941";

  useEffect(() => {
    (async () => {
      try {
        // 确保从路由参数获取城市名
        const city = route.params?.item?.city;
        if (!city) return;
        
        const api = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apikeyWeather}&lang=es`;
        const response = await fetch(api);
        const data = await response.json();
        setClima(data);
      } catch (err) {
        console.error('请求出错:', err);
      }
    })();
  }, [route.params]);

  return (
    <>
      <View style={styles.container}>
        {clima ? (
          <>
            <Text>风速: {clima.wind.speed}</Text>
            <Text>湿度: {clima.main.humidity}</Text>
            <Text>温度: {clima.main.temp}</Text>
          </>
        ) : (
          <Text>加载天气数据中...</Text>
        )}
        <Text>kk</Text>
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

额外提醒 #

• 记得给useEffect加依赖项，比如route.params，这样路由参数变化时会重新请求数据。
• 加上try/catch捕获请求错误，避免崩溃。

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