React Native中访问JSON对象数组并提取parcelId值的方法

嘿，我来帮你搞定这个问题！你遇到的undefined是因为**list.parcels是一个数组，不是单个对象**，直接用list.parcels.parcelId自然拿不到值——数组本身没有parcelId属性，它里面的每一个元素才是包含parcelId的对象。

方法1：提取所有parcelId到一个数组里 #

如果你只是想把所有parcelId收集成一个数组，可以用数组的map方法遍历parcels，逐个提取：

// 假设你的数据存在list变量里
const list = {"id": "7", "type": "history", "title": "History Parcel Delivery", "sender": "Paul", "price": "635.50", "parcels": [{"parcelId": "12"}, {"parcelId": "14"}]};

// 提取所有parcelId
const parcelIds = list.parcels.map(parcel => parcel.parcelId);
console.log(parcelIds); // 输出: ["12", "14"]

方法2：在React Native组件中渲染每个parcelId #

如果是要在组件里展示这些parcelId，可以直接在JSX中用map遍历渲染：

import React from 'react';
import { View, Text } from 'react-native';

const ParcelList = ({ list }) => {
  return (
    <View style={{ padding: 16 }}>
      {list.parcels.map((parcel) => (
        // 注意：React列表渲染需要唯一key，这里用parcelId作为key更合适（因为它是唯一的）
        <Text key={parcel.parcelId} style={{ marginVertical: 4 }}>
          包裹ID: {parcel.parcelId}
        </Text>
      ))}
    </View>
  );
};

export default ParcelList;

为什么之前会返回undefined？ #

再强调一下：你的JSON结构里parcels是一个数组（用[]包裹），数组里的每一项才是{"parcelId": "12"}这样的对象。所以你必须遍历数组中的每个元素，才能访问到每个元素的parcelId属性，直接对数组本身用.parcelId当然会得到undefined啦～

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