如何在React Native中渲染Rest API返回的企业对象数据？

1. 转换数据结构 #

你拿到的accounts是键为企业名称、值为包含id的对象的结构，无法直接遍历渲染。用Object.entries()把它转成可遍历的数组，提取出需要的企业名称和id：

// 把accounts对象转换为[{name: '企业名', id: 'xxx'}, ...]格式的数组
const formattedCompanies = Object.entries(companyDatas.accounts).map(([name, info]) => ({
  name: name.trim(), // 可选：去除企业名称前后多余空格
  id: info.id
}));

2. 正确初始化useState #

不要把原始数据塞进数组，直接用转换后的数组初始化状态：

const [companyData, setCompanyData] = useState(formattedCompanies);

如果是从API异步获取数据，就在请求完成后处理再更新状态：

// 示例API请求逻辑
const fetchCompanies = async () => {
  const response = await fetch('你的API地址');
  const data = await response.json();
  // 转换数据格式
  const formatted = Object.entries(data.accounts).map(([name, info]) => ({
    name: name.trim(),
    id: info.id
  }));
  setCompanyData(formatted);
};

3. 按需求渲染 #

遍历处理后的数组，渲染指定格式的内容：

return (
  <View style={{padding: 16}}>
    {companyData.map((item, index) => (
      <View key={index} style={{marginBottom: 12}}>
        <Text>{item.name}</Text>
        <Text>id:{item.id}</Text>
      </View>
    ))}
  </View>
);

完整代码示例 #

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

const CompanyList = () => {
  const [companyData, setCompanyData] = useState([]);

  useEffect(() => {
    // 模拟API返回数据
    const companyDatas = {
      "accounts": {
        "company 1 ": {
          "id": "4",
          "enabled": "1"
        },
        "company 2": {
          "id": "2",
          "enabled": "1"
        },
        "company 3": {
          "id": "1",
          "enabled": "1"
        }
      }
    };

    // 转换数据格式
    const formatted = Object.entries(companyDatas.accounts).map(([name, info]) => ({
      name: name.trim(),
      id: info.id
    }));

    setCompanyData(formatted);
  }, []);

  return (
    <View style={{padding: 16}}>
      {companyData.map((item, index) => (
        <View key={index} style={{marginBottom: 12}}>
          <Text style={{fontSize: 16}}>{item.name}</Text>
          <Text style={{fontSize: 14, color: '#666'}}>id:{item.id}</Text>
        </View>
      ))}
    </View>
  );
};

export default CompanyList;

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