表数据在React中是空的

Question

我是React新手。我正在尝试创建一个表。我能够填写表头，但在表体我不能填写行和数据。

这是实际数据-

const [batsmanAgainstTeamContent, setBatsmanAgainstTeamContent] = useState([
{
ball: "20",
runsOffBat: "32.0",
striker: "abc"
},
{
ball: "38",
runsOffBat: "68.0",
striker: "xyz"
},
]);

我认为问题在下面的代码片段-

const tdData =() => {
return batsmanAgainstTeamContent.map((item) => {
return (
<tr>
{
Object.keys(item).forEach((key) => {
return <td>{item[key]}</td>
})
}
</tr>
)
})   }

在下面，ThData()工作正常，但tdData()不行-

return (
<Container>
<table className="table">
<thead>
<tr>{ThData()}</tr>
</thead>
<tbody>{tdData()}</tbody>
</table>
</Container>

edit:当使用map代替forEach

时有效

Answer 1

这里您需要使用map而不是forEach

{
Object.keys(item).map((key) => {
return <td>{item[key]}</td>
})
}