Map函数中JSX未渲染问题：对象数组遍历无输出

你的问题核心是子组件Articles没有返回map生成的JSX元素，导致遍历执行了但没有内容渲染到页面。

原代码里Articles组件的函数体中，仅执行了props.db.map(...)，但没有通过return把遍历生成的JSX数组返回出去。而且外层的{}会被当成对象字面量处理，不会被识别为JSX表达式，组件最终没有任何返回值，自然无输出。

修正后的代码 #

export default function Games(){
 const db = [
   {
     game: "A Random Game",
     reviewer: "Random Reviewer",
     review: "This is a random review"
   },
   {
     game: "A Random Game Two",
     reviewer: "Random Reviewer Two",
     review: "This is a random review Two"
   },
 ]

  return (
    <Articles db={db} />
  )
} 

const Articles = (props) => {
  // 明确返回map生成的JSX数组
  return props.db.map((item) => {
    return <h1 key={item.game}>{item.game}</h1>
  })
}

更简洁的写法 #

如果箭头函数直接返回表达式，可以省略大括号和return：

const Articles = (props) => 
  props.db.map((item) => <h1 key={item.game}>{item.game}</h1>)

React函数组件的本质是一个返回JSX（或null）的函数，必须确保组件最终返回了要渲染的内容，否则不会有任何输出。

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