Array.prototype.map() 期望箭頭函數的返回值 - Apollo 客戶端 -Reactjs

Question

我正在使用 reactjs 和 graphql 構建一個項目管理應用程序。

當我從 reactjs 發出查詢時，它會收到帶有以下數據的響應

{
   "data":{
    "clients":[
       {
         "name":"Okoye Ifeoma",
         "email":"ify@mail.com",
         "phone":"0805-854-754-580"
       }
    ]
  }
}

但它沒有在瀏覽器上顯示數據，而是在控制台上顯示以下錯誤

錯誤：Array.prototype.map() 需要箭頭函數的返回值

客戶

import { gql, useQuery } from "@apollo/client";
import ClientRow from "./ClientRow";
const GET_CLIENTS = gql`
  query getClients {
    clients {
      id
      name
      email
      phone
    }
  }
`;

export const Clients = () => {
  const { loading, error, data } = useQuery(GET_CLIENTS);

  if (loading) return <p>loading...</p>
  console.log(data.clients);
  if (error) return <p>Something went wrong</p>
  return (
    <>
      {!loading && !error && (
        <table className="table table-hover mt-3">
          <thead>
            <tr>
              <th>Name</th>
              <th>Email</th>
              <th>Phone</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {data.clients.map(client => {
              <ClientRow key={client.id} client={client} />
            })}
          </tbody>
        </table>
      )}
    </>
  );
};

客戶行

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>
  );
}

Answer 1

出了什么問題？

Clients > tbody 中的箭頭函數沒有返回任何內容。

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

當您將箭頭函數的主體包含在 {} 中時，您必須明確return一個值。

修復

只需將您的 JSX 括在括號中並從函數中返回它。

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

Answer 2

我對 graphql 不感興趣，但您可以檢查是否獲取了數據。

data && data.clients.map(client => {.....})