React调用外部JS数据map渲染组件未显示问题排查

你的数据导入、map遍历逻辑均正常，组件无法渲染的核心问题出在/src/component/content.jsx的Content组件定义上：
React函数组件要求必须返回要渲染的JSX内容，你当前的Content组件用大括号{}包裹函数逻辑，内部的JSX结构没有加return关键字，函数执行后默认返回undefined，React不会渲染返回值为undefined的内容，同时因为该写法不存在语法错误，所以控制台不会抛出报错，就会出现其他JSX正常输出、map生成的组件不显示的现象。

两种修改方式任选即可：

• 方式1：给JSX结构添加显式return
  修改后的content.jsx代码如下：

import React from 'react';

export default function Content(props) {
    // 显式返回要渲染的JSX
    return (
        <div>
            <p> {props.name} </p>
            <p> {props.rollNo} </p>
        </div>
    )
}

• 方式2：使用隐式返回写法
  将函数体的大括号替换为小括号，省略return关键字（如果是普通函数直接替换括号即可，也可以改成箭头函数写法，效果一致）：

import React from 'react';

// 箭头函数隐式返回示例
const Content = (props) => (
    <div>
        <p> {props.name} </p>
        <p> {props.rollNo} </p>
    </div>
)

export default Content;

遍历生成列表类组件时，建议给每一项根组件添加唯一的key属性，帮助React更高效地识别列表项变化，避免渲染性能问题和控制台告警。可以修改App.jsx中的map逻辑，用数据中唯一的rollNo作为key值：

const jokeElements =  Data.map( (ele) => {
    return(
        <Content 
            key={ele.rollNo}
            name={ele.name} 
            rollNo={ele.rollNo} 
        />
    );
})

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