React获取API数据可正常打印日志但无法渲染元素如何解决

• 后端Django + django_rest_framework接口服务运行正常，React前端发起请求可正常获取数据，控制台可正确打印返回结果，但页面无任何渲染输出，无报错信息。
• 已排除组件库问题：将MaterialUI的Grid组件替换为原生div标签后问题复现。
• 核心代码验证结果：
  1. 遍历打印日志逻辑正常运行：

  {
    posts.map(post =>{
      console.log("log: ", post.id);
      // 存在2条post数据时，可正确依次打印id 2、1
    })
  }
  

  2. 遍历渲染逻辑无任何效果：

  {
    posts.map(post =>{
      <Grid>Hello</Grid>
      // 无渲染输出，无控制台报错
    })
  }
  

属于JSX箭头函数的基础语法错误，和后端服务、前端组件库无关：
箭头函数使用{}包裹函数体时，必须通过return显式返回需要渲染的JSX节点。当前代码的map回调函数仅在内部写了JSX，但没有返回值，React无法获取待渲染的节点，因此不会产生任何渲染输出，也不会抛出错误。
console.log可以正常执行，是因为该语句本身是函数体内的可执行代码，和函数是否有返回值没有关联。

两种合法写法任选即可：

• 简写模式（适合单行渲染逻辑）：去掉函数体花括号，箭头后直接写返回的JSX

{
  posts.map(post => <Grid key={post.id}>Hello</Grid>)
}

• 完整模式（适合函数体内有额外处理逻辑的场景）：保留花括号，手动添加return语句

{
  posts.map(post => {
    // 可在此处添加数据处理、条件判断等逻辑
    return <Grid key={post.id}>Hello</Grid>
  })
}

注意：列表渲染时必须给每一项的根节点添加唯一的key属性（优先使用数据自身的唯一id），否则会出现渲染diff异常、控制台警告。

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