React读取JSON文件遍历JsonData渲染表格仅显表头无数据如何解决

你的代码存在4个核心错误，导致表格数据无法正常渲染：

• 函数未执行：<tbody>内写的{displayStockCodes}只是传入了函数引用，没有加括号调用函数，函数逻辑根本不会运行，自然不会返回任何可渲染的节点。
• 函数无返回值：displayStockCodes内部调用JsonData.map()生成了表格行节点，但没有通过return把map生成的结果数组返回，就算手动调用函数也拿不到渲染内容。
• JSX属性语法错误：React JSX中给元素挂载CSS类不能使用原生HTML的class属性，必须替换为className，否则类名不会被正确解析，表格样式也会失效。
• 列表项缺少唯一标识：通过map循环渲染列表元素时，必须给每一项的根节点（此处为<tr>）添加唯一的key属性，否则React会抛出渲染警告，后续列表更新时也可能出现内容错乱问题，这里用每条数据唯一的symbol字段作为key即可。
• 前置检查项：确认你已经在文件顶部通过import JsonData from '你的JSON文件实际存放路径'正确导入了数据源，否则JsonData本身为未定义状态，也无法完成渲染。

// 请替换为你自己项目中JSON文件的实际路径
import JsonData from './stock-data.json';

const Home = () =>{
    const displayStockCodes = () =>{
        // 返回map生成的表格行数组
        return JsonData.map(
            (info)=>{
                return(
                    // 给循环项添加唯一key
                    <tr key={info.symbol}>
                        <td>{info.symbol}</td>
                        <td>{info.type}</td>
                    </tr>
                )
            }
        );
    };
    
    return (
        <div>
            {/* class替换为JSX支持的className */}
            <table className="table table-striped">
                <thead>
                    <tr>
                    <th>Symbol</th>
                    <th>Type</th>
                    </tr>
                </thead>
                <tbody>                
                    {/* 加括号执行渲染函数 */}
                    {displayStockCodes()}               
                </tbody>
            </table>
             
        </div>

    );
};

export default Home;

如果不需要单独抽离渲染逻辑，也可以直接把JsonData.map()的逻辑写在<tbody>的花括号内，代码会更简洁。

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