Reactjs 如何在 React Native 中渲染下面的对象数组

正如@Technophyle comments 的那样，请分享你下一次try 的内容.我假设该对象存储在某种类型的变量中，目前我将其命名为companyData.

以下是您将如何实现您想要的输出

export default function App() {

  const companyDatas = {
    "accounts": {
        "company 1 ": {
            "id": "4",
            "enabled": "1"
        },
        "company 2": {
            "id": "2",
            "enabled": "1"
        },
        "company 3": {
            "id": "1",
            "enabled": "1"
        }
    }
  };

  const [companyData, setCompanyData] = useState(companyDatas)

  return (
    <View style={styles.container}>
      {
        Object.entries(companyData.accounts)
        .map(([company, accountData]) => (
          <View key={company}>
            <Text>{company}</Text>
            <Text>id: {accountData.id}</Text>
          </View>
        ))
      }
    </View>
  );
}

使用Object.entries()将得到一个公司对象数组，如下所示:

[
    [
        "company 1 ",
        {
            "id": "4",
            "enabled": "1"
        }
    ],
    [
        "company 2",
        {
            "id": "2",
            "enabled": "1"
        }
    ],
    [
        "company 3",
        {
            "id": "1",
            "enabled": "1"
        }
    ]
]

然后使用.map(([company, accountData]))，我们可以将数据赋给这些变量.然后，您只需在JSX中将它们用作{company}和{accountData}.

编辑:

我之前没有注意到useState.首先，我想问为什么companyData被存储为useState([companyData])，因为这就是为什么它会给出这个错误.将[]从其中移除将会修复它.