在react js中将json渲染为表

Question

我试图在react中使用useState在表中呈现json数据，但由于某种原因它没有出现

这是react文件:

import React, { useState } from 'react'
import "../styling/Classes.css"
import data from "./mock-data.json";
function Classes() {
const [inputFields, setInputFields] = useState([
{ classCode: '', studentAmount: '' }
])

const [students, setStudents] = useState(data)
return (
<div className="classes-container">
<div className="classes-wrapper">
<h2>Classes</h2>
<table>
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Class code</th>
<th>Birth date</th>
<th>Mobile number</th>
</tr>
</thead>
<tbody>
{students.map((student) => {
<tr>
<td>{student.FirstName}</td>
<td>{student.LastName}</td>
<td>{student.ClassCode}</td>
<td>{student.BirthDate}</td>
<td>{student.MobileNumber}</td>
</tr>
})}

</tbody>
</table>
</div>
</div>
)
}
export default Classes;

这是json文件:

[
{
"id": 0,
"FirstName": "Saif",
"LastName": "Khadraoui",
"ClassCode": "13-MA1",
"BirthDate": "17/12/2003",
"MobileNumber": "78464329843"
},
{
"id": 1,
"FirstName": "test1",
"LastName": "Khadraoui",
"ClassCode": "13-MA1",
"BirthDate": "17/12/2003",
"MobileNumber": "83427912"
},
{
"id": 2,
"FirstName": "test2",
"LastName": "Khadraoui",
"ClassCode": "13-MA1",
"BirthDate": "17/12/2003",
"MobileNumber": "316283216821"
}
]

Answer 1

问题在这里:

{students.map((student) => {
// You are not returning the part that should render
<tr>
<td>{student.FirstName}</td>
<td>{student.LastName}</td>
<td>{student.ClassCode}</td>
<td>{student.BirthDate}</td>
<td>{student.MobileNumber}</td>
</tr>
})}

{students.map((student) => {
// Just return this part and it should render. 
// Also don't forget to add a key for each tr
return (
<tr key={`${student.FirstName}-${student.LastName}`} >
<td>{student.FirstName}</td>
<td>{student.LastName}</td>
<td>{student.ClassCode}</td>
<td>{student.BirthDate}</td>
<td>{student.MobileNumber}</td>
</tr>
);
})}

Answer 2

因为您只返回JSX，所以您可以用括号替换大括号。另外，确保使用唯一的Id为迭代键，否则您肯定会遇到狡猾的bug。数据中有id，我们用它:

{students.map(student => (
<tr key={student.id}>
<td>{student.FirstName}</td>
<td>{student.LastName}</td>
<td>{student.ClassCode}</td>
<td>{student.BirthDate}</td>
<td>{student.MobileNumber}</td>
</tr>
)}