React中数组Map函数无法渲染数据问题求助

你的代码问题出在map回调函数没有返回JSX元素：当前箭头函数用大括号包裹了逻辑，但没有写return语句，导致map执行后返回的是全为undefined的数组，页面自然不会渲染任何内容。

两种修正方案： #

1. 隐式返回：去掉大括号，让箭头函数直接返回JSX（适合单条返回语句的场景）

<div>
    <h1>My pets</h1>
    <ul>
      {
        pets.map((pet, index) =>             
          <li key={index}>
            <h1> {pet.name} </h1>
          </li>
        )
      }
    </ul>
  </div>

2. 显式返回：在大括号内添加return语句（适合需要多行逻辑处理的场景）

<div>
    <h1>My pets</h1>
    <ul>
      {
        pets.map((pet, index) => {             
          return (
            <li key={index}>
              <h1> {pet.name} </h1>
            </li>
          )
        })
      }
    </ul>
  </div>

额外优化建议： #

尽量避免用数组索引index作为key，如果你的宠物名称是唯一的，用pet.name作为key会更合适，这能帮助React更高效地更新DOM：

<li key={pet.name}>
  <h1> {pet.name} </h1>
</li>

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