如何使用React Hooks获取一个对象数组并在组件中将其渲染为普通文本

Question

我想在我的应用程序中显示一些从API获取数据的卡片信息。每个客户都有1、2或3张不同的卡，我使用JWToken进行身份验证，但我没有在这里包含它。因此，API响应不是静态的。

Request: GET "/xx/cards"
Response is an array of objects: 
[
{
"cardId": "1",
"cardType": {
"3": "General Card" 
},
"salutation": {
"1": "Mrs." 
},
"firstName": "Test",
"lastName": "User",
"status": 'active',
"creationDate": "30.10.2020",

},
{
"cardId": "2",
"cardType": {
"2": "Special Card" 
},
"salutation": {
"2": "Mr." 
},
"firstName": "Test1",
"lastName": "User1",
"status": 'active',
"creationDate": "30.10.2020",

},

]

在React上下文中：

const [cards, setCards] = useState<any>([]);

在MyCards.tsx组件中：

const MyCards: React.FC = () => {
const {
cards,
setCards,
} = React.useContext(AuthContext);

const [content, setContent] = useState([]);
useEffect(() => {
axios.get("/xx/cards").then(
(response) => {
setContent(response.data);
setCards(response.data);  
},
(error) => {
const _content =
(error.response && error.response.data) ||
error.message ||
error.toString();
setContent(_content);
}
);
}, []);
return (
<React.Fragment>
<IonPage className="ion-page" id="main-content">

<IonContent className="ion-padding">
<h1>Your Cards</h1>
<p>{JSON.stringify(cards)}</p>
...HERE I should write some code but don't know what...
</IonContent>
</IonPage>
</React.Fragment>
);
};
export default MyCards;

我想把卡片列为我的组件中的普通文本(如下(：

Mrs. Test User
Card Id: 1
Card Type: General Card
Mr. Test1 User1
Card Id: 2
Card Type: Special Card

如何做到这一点？我真的不知道如何设置对象数组的状态。如有任何帮助，我们将不胜感激。谢谢：(

Answer 1

一个解决方案是在数组上使用map函数，请参阅此处

return(
...
{
cards.map(card => (
<p>
{card.firstName} {card.lastname}<br/>
Card Id: {card.cardId}<br/>
...
</p>
))
}
...
)

像这样，但对我来说，api中有一个问题，就是对象中的所有键号。。

迭代的更好选择是这样的对象数组：

[
{
"cardId": "1",
"cardType": "General Card",
"salutation": "Mrs.",
"firstName": "Test",
"lastName": "User",
"status": 'active',
"creationDate": "30.10.2020",
},
...
]

Answer 2

我认为您想要的是通过对象数组进行映射并显示它们，类似于以下内容：

...
<p>{JSON.stringify(cards)}</p>
{cards?.map(card => (
<div>
<p>{Object.values(card.salutation)[0] card.firstName card.lastName}</p>
<p>Card Id: {card.cardId}</p>
<p>Card type: {Object.values(card.cardType)[0]}</p>
</div>
))}
...