在react-js中打印JSON数据

Question

我尝试在react app. its工作中打印学生详细信息，但打印格式不正确。我将数据存储在db.js文件

const School = [
{ class: "First", student: ["sam", "anu", "rahul"], images: ["sam.jpg","anu.jpg","rahul.jpg"] },
{ class: "Second", student: ["anil", "sunil", "nikhil"], images: ["anil.jpg","sunil.jpg","nikhil.jpg"] }
];

和School.js

import React from "react";
function Student() {
const { class, student, images} = data;
return (
<div>
<p>{class}</p>
{student.map((name) => (
<div
key={name}
className="student"
data-answer={name}>
{name}-{images} /* <img src={images} alt="stud-img" /> */
</div>
))}
</div>
);
}
export default Student;

这里的数据显示如下

First
sam-sam.jpg,anu.jpg,rahul.jpg
anu-sam.jpg,anu.jpg,rahul.jpg
rahul-sam.jpg,anu.jpg,rahul.jpg

我想要这样的结果:

First
sam-sam.jpg
anu-anu.jpg
rahul-rahul.jpg

如何像上面那样打印数据，JSON数据有任何变化，我是新手请帮我解决这个问题，提前谢谢

Answer 1

实现这一目标的一种方法是使用map的第二个参数，即index.

但是重要的是要注意，只有当学生数组和图像数组的顺序正确匹配时，这才会起作用。

function Student() {
const { class, student, images} = data;
return (
<div>
<p>{class}</p>
{student.map((name, index) => (
<div
key={name}
className="student"
data-answer={name}>
{name}-{images[index]} /* <img src={images} alt="stud-img" /> */
</div>
))}
</div>
);
}