React+Apollo Client报map()期望箭头函数返回值错误排查

控制台抛出的 Error: Array.prototype.map() expects a return value from arrow function 错误，核心原因是调用data.clients.map()时传入的箭头函数没有返回渲染内容。
你当前写的map回调使用了大括号{}包裹函数体，这种写法下必须手动写return语句返回要渲染的组件，你现在只写了<ClientRow />却没加return，导致map遍历后得到的数组全是undefined，React无法完成渲染就抛出了该错误。
除此之外代码还有两个会影响渲染的小问题：

• 贴出的GraphQL响应示例里clients数组项没有id字段，但查询语句和列表key都依赖client.id，如果后端确实没返回id会触发React列表key警告，甚至导致渲染异常。
• ClientRow组件里直接把FaTrash放在花括号中渲染是错误的，react-icons导出的是React组件，需要按JSX标签语法使用。

按以下步骤修改代码即可解决问题：

• 修复map回调无返回值的问题，两种写法二选一即可：
  1. 保留大括号的写法，手动添加return：

  <tbody>
    {data.clients.map(client => {
      return <ClientRow key={client.id} client={client} />
    })}
  </tbody>
  

  2. 用箭头函数简写语法，去掉大括号，表达式结果会自动返回，写法更简洁：

  <tbody>
    {data.clients.map(client => <ClientRow key={client.id} client={client} />)}
  </tbody>
  

• 修复ClientRow里的图标渲染错误，把FaTrash改成JSX标签形式：

import { FaTrash } from "react-icons/fa";
export default function ClientRow({ client }) {
  return (
    <tr>
      <td>{client.name}</td>
      <td>{client.email}</td>
      <td>{client.phone}</td>
      <td>
        <button className="btn btn-danger"><FaTrash /></button>
      </td>
    </tr>
  );
}

• 检查后端GraphQL接口，确保clients查询返回每条数据的id字段，和你写的GET_CLIENTS查询字段保持一致。

可选优化：你在组件最开头已经写了if (loading) return <p>loading...</p>和if (error) return <p>Something went wrong</p>，走到后面return逻辑的时候必然满足!loading && !error，可以把外层的这个判断去掉简化代码。

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