react js在jsx中迭代一个对象

Question

React.js中的这段代码需要显示一个简单的表格，其中的单元格由数据库中的数据填充。json，但我唯一看到的是一个空白页，我试图console.log(cell)在td和正确的信息被记录，但没有显示在屏幕上。

Sheet.js

import React from 'react'
function Sheet() {
const data = require('../store/db.json')
const mySheet = data.sheet1
return (
<>
<table>
<tbody>
{
Object.entries(mySheet).forEach(([row, cols]) => (
<tr key={row}>
{
Object.entries(cols).forEach(([col, cell]) => (
<td key={`${row},${col}`}>
{cell}
</td>
))
}
</tr>
))
}
</tbody>
</table>
</>
)
}
export default Sheet

db.json

{
"sheet1": {
"1": {
"1": "1,1",
"2": "1,2",
"3": "1,3"
},
"2": {
"1": "2,1",
"2": "2,2",
"3": "2,3"
},
"3": {
"1": "3,1",
"2": "3,2",
"3": "3,3"
}
}
}

Answer 1

.forEachJS数组方法始终返回undefined。

console.log([1, 2, 3].forEach(x => x * 2)) // -> undefined

如果你想从一个源数组返回另一个数组，使用.map

console.log([1, 2, 3].map(x => x * 2)) // [2, 4, 6]