React Native调用Coingecko API时出现未定义属性读取错误求助

问题背景 #

技术栈：React Native、Node.js & Express
尝试从Coingecko API拉取数据，映射到4个卡片组件。服务器及路由运行正常，已有2个接口实现成功，问题大概率出在前端。

相关代码片段 #

1. 状态定义：

const [blockOneData, setBlockOneData]= useState([]);

2. useEffect中调用异步获取函数：

useEffect(() => {
  async function fetchData() {
      await getCoinsDetail() // 此函数正常工作
      await getTopLosers()   // 此函数也正常工作
      await getBlockOneData()
  }
  fetchData()
})

3. 数据获取异步函数：

const getBlockOneData = async () => {
  const iosUrl = 'http://localhost:5000';
  const androidUrl = 'https://api.coingecko.com/api/v3/global/decentralized_finance_defi';

  const response  =  await axios
  .get(androidUrl, {
    headers: {
      "Content-Type": "application/json",
    },
  })
  .then(function (response) {
    console.log('response', response);
    setBlockOneData(response.data)
  })
  .catch(function (error) {
    console.log('error',error);
    // 处理错误
  });
}

问题现象 #

• Postman测试服务器接口http://localhost:5000/coins/blockData可正常获取目标数据
• 应用运行时抛出错误：cannot read property '<key/value name>' of undefined
• 临时解决方法：注释数组中除第一个外的所有对象，将value改为硬编码值，保存后错误消失；改回blockOneData.data.trading_volume_24h并取消注释其他对象，数据可正常渲染，但重启服务器和应用后错误再次出现

问题根源 #

1. 初始状态类型不匹配：你给blockOneData设置的初始值是数组[]，但实际从API返回的是对象类型（包含data字段的结构）。组件首次渲染时，blockOneData还是数组，不存在data属性，直接访问blockOneData.data.trading_volume_24h自然会报错。
2. 异步加载时机问题：组件第一次渲染时，API请求还没完成，blockOneData保持初始数组状态，此时读取属性必然失败。临时方法生效是因为热重载时数据已经加载完成，状态已经更新为正确的对象，重新渲染不会出错；但重启后初始状态回到数组，再次触发报错。

解决方案 #

1. 修正初始状态类型：把blockOneData的初始值改成空对象{}，和API返回的数据类型匹配：

const [blockOneData, setBlockOneData]= useState({});

2. 添加空值判断（更严谨）：渲染时先确认数据存在，再访问属性，避免空值报错。可以用条件渲染或者可选链操作符（React Native支持ES2020+语法）：

// 条件渲染示例
{blockOneData.data && (
  <YourCardComponent value={blockOneData.data.trading_volume_24h} />
)}

// 可选链写法（更简洁）
<YourCardComponent value={blockOneData?.data?.trading_volume_24h} />

3. 统一接口请求路径：代码里直接调用了Coingecko的API，但你提到自己的服务器接口能正常返回数据，建议统一通过自己的服务器代理请求，这样能避免跨域或平台适配问题（比如iOS用localhost，Android需要用真实IP）。

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