如何在同一个平面列表中列出两个不同的数据?

Question

我只想使用平面列表列出annotation和editedAnnotation，但我不能同时列出两者。如下所示，它仅列出注释。

我的状态和 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}/>
)}
/>

接口返回：

{
"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.