JSX 中的输出列表

Question

我正在尝试在 JSX 中输出 HTML 列表。

这是我构建数组的方法：

let seasonsList = [];

for (var i=0; i < jsonData.data.campaigns.list.length; i++) {
    seasonsList.push(<li key={i}>{jsonData.data.campaigns.list[i].name}</li>);
}

 

当我尝试输出此列表时，我在 ul 标签内什么也没有得到

return (
    <ul>{seasonsList}</ul>
);

如何输出 ul 标签内的名称列表？

Answer 1

• 确保您的 jsonData.data.campaigns.list 包含预期数据

而不是使用 for 循环，你应该尝试这个方法

let seasonsList = jsonData?.data?.campaigns?.list?.map((campaign, index) => (
  <li key={index}>{campaign.name}</li>
));

return <ul>{seasonsList}</ul>