React Native中如何通过useState访问类JSON对象的属性？

问题根源 #

1. 错误遍历数组方式：data是数组，Object.entries(data)会把数组转为[索引, 元素]的键值对，这不是你需要的对象键值对遍历逻辑。
2. 对象结构不统一+数组访问错误：data中的每个元素是仅含ob1或ob3的对象，直接访问value.ob1会因部分元素无ob1报错；且ob1本身是数组，你试图访问的value.ob1.key是在访问数组的key属性（不存在），应该遍历数组内的单个对象。

解决方案 #

方案1：适配现有数据结构修改遍历逻辑 #

修改Show函数，先遍历data数组，再提取每个对象内的子数组，最后遍历子数组生成组件：

const Show = () => {
  return (
    <View style={{flex:1, flexDirection:'row'}}>
      {/* 遍历data数组中的每个对象 */}
      {data.map((item, outerIndex) => {
        // 提取当前对象里的子数组（不管键是ob1还是ob3）
        const subItems = Object.values(item)[0];
        return (
          <Grid_ver color={'yellow'} key={outerIndex}>
            {/* 遍历子数组生成Grid_hor */}
            {subItems.map((subItem) => (
              <Grid_hor id={subItem.key} color={'yellow'} key={subItem.key}>
                <Text>{subItem.text}</Text>
              </Grid_hor>
            ))}
          </Grid_ver>
        );
      })}
    </View>
  );
};

方案2：优化数据结构（更推荐） #

把data改成更直观的结构，避免动态键名带来的遍历麻烦：

const [data, setData] = useState([
  {
    groupKey: 'ob1',
    items: [
      {key:'1b',value:true,text:'data'},
      {key:'2b',value:true,text:'data'},
      {key:'3b',value:true,text:'data'},
      {key:'4b',value:true,text:'data'},
    ]
  },
  {
    groupKey: 'ob3',
    items: [
      {key:'1b',value:true,text:'data'},
      {key:'2b',value:true,text:'data'},
      {key:'3b',value:true,text:'data'},
      {key:'4b',value:true,text:'data'},
    ]
  }
])

// 对应的Show函数更简洁
const Show = () => {
  return (
    <View style={{flex:1, flexDirection:'row'}}>
      {data.map((group) => (
        <Grid_ver color={'yellow'} key={group.groupKey}>
          {group.items.map((item) => (
            <Grid_hor id={item.key} color={'yellow'} key={item.key}>
              <Text>{item.text}</Text>
            </Grid_hor>
          ))}
        </Grid_ver>
      ))}
    </View>
  );
};

关键说明 #

• 必须给列表元素添加唯一key属性，避免React渲染警告。
• 方案2的结构更易维护，类型提示也会更清晰，后续扩展新分组时无需修改遍历逻辑。

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