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

Question

我只想使用 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 Return:

{
  "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
    }
  ]
}

Answer 1

您可以使用展开运算符将两个列表混合成一个列表。

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

或者您可以尝试使用 SectionList。