如何在同一个 FlatList 中列出两个不同的数据？答案

【问题标题】：How to list two different data in the same FlatList?如何在同一个 FlatList 中列出两个不同的数据？
【发布时间】：2019-12-16 18:26:59
【问题描述】：

我只想使用 FlatList 列出 annotation 和 editedAnnotation，但我不能同时列出这两个。如下图，只是listing注解。

我的状态和 API：

const [cards, setCards] = useState([]);
useEffect(() => {
  async function loadCards() {
      const response = await api.get('annotation');
      setCards(response.data);
  }
  loadCards();
}, []);

我的清单：

<FlatList
  data={cards.Annotation}
  keyExtractor={call => String(call.id)}
  renderItem={({item: call}) => (
    <Card {...call}/>
  )}
/>

API 返回：

{
  "Annotation": [
    {
      "id": 1,
      "dateIn": "2019-12-13T18:54:39.0248433+00:00",
      "message": "test1",
      "statusId": 1,
      "symbolId": 5,
      "symbol": {
        "id": 5,
        "status": "start",
      }
    },
    {
      "id": 2,
      "dateIn": "2019-12-13T14:23:10.6056632+00:00",
      "message": "test2",
      "statusId": 1,
      "symbolId": 2,
      "symbol": {
        "id": 2,
        "status": "end",
      }
    }
  ],
  "editedAnnotation": [
    {
      "Annotation": {
        "id": 3,
        "dateIn": "2019-12-13T19:28:10.6056632+00:00",
        "message": "test3",
        "statusId": 1,
        "symbolId": 2,
        "symbol": {
          "id": 2,
          "status": "start",
        }
      }
    },
    "id": 1,
    "dateEdit": "2019-12-13T22:27:23.6273816+00:00",
    "newMessage": "test3 updated",
    "annotationId": 3
    }
  ]
}

【问题讨论】：

标签： react-native axios react-hooks react-native-flatlist

【解决方案1】：

您可以使用扩展运算符将两个列表混合到一个列表中。

<FlatList
  data={[...(cards.Annotation || []), ...(cards.editedAnnotation || [])]}
  keyExtractor={call => String(call.id)}
  renderItem={({item: call}) => (
    <Card {...call}/>
  )}
/>

或者您可以尝试使用SectionList。

【讨论】：