React Native展示API返回单条JSON数据时出现undefined报错的解决咨询

核心原因 #

1. 初始状态未定义：useState() 未设置初始值，组件首次渲染时 user 为 undefined，直接访问 user.name 触发报错。
2. 钩子使用错误：误将 useEffect 写成 useState，导致数据请求逻辑无法正确执行。
3. 无效属性：Text 组件不存在 value 属性，属于冗余代码。

修复后的代码 #

import { useState, useEffect } from 'react';
// 导入其他必要模块...

const YourComponent = ({ route }) => {
  // 初始值设为空对象，避免undefined状态
  const [user, setUser] = useState({});
  const getUserData = async () => {
    try {
      const response = await fetch(`http://*******/warrant/${route.params.id}`, {
        headers: {
          Authorization: "Basic " + base64.encode(username + ":" + password)
        }
      });
      const json = await response.json(); // 新增const声明，避免全局变量污染
      setUser(json.warrant);
    } catch (error) {
      console.error(error);
    }
  };

  // 修正为useEffect钩子，确保组件挂载时触发请求
  useEffect(() => {
    getUserData();
  }, []);

  return (
    <View>
      <View>
        <Text style={styles.input2}>name:</Text>
        {/* 用可选链处理空值，同时添加加载提示 */}
        <Text style={styles.input}>{user?.name || '加载中...'}</Text>
      </View>
    </View>
  );
};

export default YourComponent;

关键修复点说明 #

• 初始状态初始化：useState({}) 给 user 设置初始空对象，避免首次渲染时因 undefined 报错。
• 钩子修正：将错误的 useState(() => {...}) 替换为 useEffect，确保组件挂载时触发数据请求。
• 空值安全访问：使用 user?.name 可选链操作符，当 user 为空或未定义时不会抛出错误；搭配 || '加载中...' 给用户提供加载状态反馈。
• 变量声明规范：给 json 添加 const 声明，避免意外修改全局变量。
• 移除无效属性：删除 Text 组件的 value 属性，Text 仅需在标签内部传入展示内容。

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