JSX中使用map()渲染时报render无返回值错误该如何解决？

你遇到的报错完全是代码逻辑疏漏导致的，核心问题有2个：

• 你的App组件没有任何返回值。你调用contacts.map()生成了组件数组，但既没有把这个数组返回，也没有将其包裹到JSX结构中渲染，React找不到需要渲染的内容，自然会抛出「渲染未返回任何内容」的错误。
• 现有代码不符合React列表渲染规范，且存在逻辑冗余：遍历生成的列表元素必须加唯一key属性避免虚拟DOM更新异常；另外你把公共标题My Contacts写在了Card组件内，遍历后每张卡片都会重复展示这个标题，不符合业务逻辑。

1. App.jsx 代码 #

import React from "react";
import { Card } from "./Card";
import { contacts } from "../contacts";

function App() {
  return (
    <div className="contacts-container">
      {/* 公共标题移到外层，避免重复渲染 */}
      <h1 className="heading">My Contacts</h1>
      {/* 把map生成的组件数组放到JSX中，同时给每个列表项加唯一key */}
      {contacts.map((item) => (
        <Card 
          key={item.name}
          name={item.name} 
          img={item.imgURL} 
          phone={item.phone} 
          email={item.email} 
        />
      ))}
    </div>
  )
}

export default App;

如果不需要多余的外层容器，也可以用React空标签<></>包裹内容，不会生成额外DOM节点。

2. Card.jsx 代码（移除重复的公共标题） #

import React from "react";

export const Card = (props) => {
    return (
        <div className="card">
            <div className="top">
                <h2 className="name">{props.name}</h2>
                <img className="circle-img"
                    src={props.img}
                    alt="avatar_img"
                />
            </div>
            <div className="bottom">
                <p className="info">{props.phone}</p>
                <p className="info">{props.email}</p>
            </div>
        </div>
    );
}

• 组件必须有返回值：所有需要渲染的内容都要通过return返回给React，map本身只会返回新数组，你需要把这个数组放到组件返回的JSX结构中才能被渲染。
• 列表项必须加唯一key：遍历生成的组件必须加key属性，值必须是当前列表中唯一不变的标识（比如数据的id、不重复的name），不要用数组索引当key，列表如果有增删排序操作会触发渲染bug。
• map的箭头函数写法注意：如果用大括号{}包裹逻辑，必须手动return需要渲染的组件；如果用小括号()包裹JSX，可以省略return写法更简洁。

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