React.js中JSX遍历对象渲染db.json表格出现空白页问题排查

问题原因 #

• JSX中渲染列表需要拿到可渲染的元素数组，你使用的forEach方法仅执行遍历逻辑，返回值为undefined，没有返回生成的<tr>、<td>元素，因此React无内容可渲染。
• 控制台能打印cell的值是因为forEach的遍历逻辑确实被执行了，只是执行后没有返回值供React渲染。

修复方法 #

将代码中两处forEach替换为map方法，map会把每次遍历生成的DOM元素组装为数组返回，React可正常渲染该元素数组。

修复后完整代码 #

import React from 'react'

function Sheet() {
    const data = require('../store/db.json')
    const mySheet = data.sheet1

    return (
        <>
            <table border="1">
                <tbody>
                    {
                        Object.entries(mySheet).map(([row, cols]) => (
                            <tr key={row}>
                                {
                                    Object.entries(cols).map(([col, cell]) => (
                                        <td key={`${row},${col}`}>
                                            {cell}
                                        </td>
                                    ))
                                }
                            </tr>
                        ))
                    }
                </tbody>
            </table>
        </>
    )
}

export default Sheet

注：代码中新增的border="1"仅为方便查看表格边框效果，可根据需求自行移除。

内容的提问来源于stack exchange，提问作者Kodak3993