从 react web 中的 api 值创建动态卡片视图。我是反应js的新手。如何在基于对象的 React js 中创建动态卡片视图？答案

【问题标题】：Create dynamic Card View from values from api in react web. I am new to react js. How to crearte dynamic card view in react js based on object?从 react web 中的 api 值创建动态卡片视图。我是反应js的新手。如何在基于对象的 React js 中创建动态卡片视图？
【发布时间】：2021-01-11 16:42:56
【问题描述】：

我想根据从 API 接收到的数据创建卡片视图列表。例如，我有一个学生对象。我想创建一张卡片，其中学生姓名学生时间和学生班级，还有一个按钮可以在同一张卡片上承认学生上课。我是反应js的新手。

【问题讨论】：

请编辑您的问题以包含Minimal, Complete, and Reproducible Example。通常，您会将获取的数据存储在一个数组中，并使用array.prototype.map 将数据映射到您要呈现的 JSX。见Lists & Keys。如果您有任何问题，我建议您参考官方 React 文档，它们信息丰富且维护良好。

标签： html reactjs react-native

【解决方案1】：

循环遍历您的学生数组并使用 foreach 数组方法为每个学生呈现一张卡片，您可以选择其他方法循环遍历您的数组：

StudentsArray.forEach((element))=>{
    return(
      <Card name={element.name} id={element.id}/>
    )
}

检查每个循环引用Array.prototype.foreach()

更多信息请查看loop through an array in javascript

更新： ForEach 不返回任何值。使用 map() 代替如下示例：Array.map()

【讨论】：

ForEach 不返回任何值。 w3schools.com/jsref/jsref_foreach.asp