React Native中通过Axios调用API无法访问priceRange嵌套数据

排查步骤与解决方案： #

• 先确认API返回的真实结构
  别瞎猜，直接在代码里打印完整的item对象，看看priceRange到底存不存在、内部字段叫啥：

  console.log('商品完整数据:', item);
  

  打开React Native调试工具看日志，确认priceRange的层级、字段名（比如会不会是price_range而非priceRange，很多API会用下划线命名）。

• 直接渲染对象会显示[object Object]
  {item?.priceRange}显示这个是正常的——React没法直接渲染对象，你得取它的具体属性。比如API返回的priceRange是{ minPrice: 100, maxPrice: 200 }，那要这么写：

  <Text>价格范围：{item?.priceRange?.minPrice} - {item?.priceRange?.maxPrice}</Text>
  

• 处理undefined的情况
  出现undefined要么是priceRange本身不存在（比如部分商品没价格），要么是字段名错了。用多层可选链+默认值兜底：

  <Text>价格：{item?.priceRange?.minPrice || '暂无价格'}</Text>
  

• 检查Axios的响应处理
  如果你给Axios加了transformResponse或者自定义了解析逻辑，看看是不是把priceRange字段给改没了。Axios默认会自动解析JSON，要是没特殊需求别瞎改这个配置。

• 确保数据加载完成再渲染
  要是请求还没结束就渲染组件，item可能是undefined，所以要加个loading状态判断：

  if (loading) return <Text>加载中...</Text>;
  return (
    <View>
      <Text>{item?.name}</Text>
      <Text>价格：{item?.priceRange?.minPrice || '暂无价格'}</Text>
    </View>
  );
  

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