无法使用具有 FlatList 反应本机的对象访问对象条目答案

【问题标题】：Cannot access object entries using an object with FlatList react native无法使用具有 FlatList 反应本机的对象访问对象条目
【发布时间】：2021-02-07 13:01:48
【问题描述】：

我正在渲染的数组包含一个对象，其中包含我尝试渲染的多个条目，如下所示

item.data 因为它在父数组中

<FlatList
  keyExtractor={(item) => item.software_name}
  extraData={state}
  data={Object.entries(item.data.workstation_software)}
  renderItem={({ item }) => (
    <Text style={[styles.h3, styles.mbs]}>{Object.entries(item).software_name}</Text>
  )}
/>

我的数据是这样的

room_workstations props: Object {
  "-MKLNv5HUu8ebCpdDvzb": Object {
    "workstation_hardware_brand": "Apple",
    "workstation_hardware_name": "MacBook Pro",
    "workstation_hardware_os": "Apple OS X 10.14",
    "workstation_software": Object {
      "-MKQxkmYczJOOa6W_Kp_": Object {
        "software_company": "Steinberg",
        "software_name": "Cubase",
        "software_type": Array [
          "Audio",
          "Online",
        ],
      },
      "-MKQy7l9uGBX2Am_lEtr": Object {
        "software_company": "Avid",
        "software_name": "Media Composer",
        "software_type": Array [
          "VFX",
          "Audio",
        ],
      },
      "-MKR21EP7OX2C8i4hSKJ": Object {
        "software_company": "Merging",
        "software_name": "Pyramix",
        "software_type": Array [
          "Audio",
        ],
      },
    },
  },
}

我似乎无法理解如何访问内部变量以在前端显示我尝试了几次尝试，到目前为止我能够显示索引但不会显示条目。

item 本身就给我错误

对象作为 React 子对象无效，找到带有键的对象

【问题讨论】：

我认为您将不正确的数据提供给 flatlist。它需要对象数组，并且正在获取带有键的对象。您究竟想在视图中显示哪些数据？
software_company，名称和类型，如何将此对象转换为数组？

标签： javascript reactjs react-native ecmascript-6

【解决方案1】：

您应该首先将您的主对象转换为对象数组，以便您的 Flatlist 被接受为有效数据。

对于您的具体情况，Object.values 可以提供如下帮助：

// this can also be done in a useEffect hook
const processedData = Object.values(item.data.workstation_software);


return <FlatList
  keyExtractor={(item) => item.software_name}
  data={processedData}
  renderItem={({ item }) => (
    <Text style={[styles.h3, styles.mbs]}>{item.software_name}</Text>
  )}
/>

【讨论】：