[英]Array.prototype.map() expects a return value from arrow function - Apollo client -Reactjs
I am building a project management application using reactjs and graphql.我正在使用 reactjs 和 graphql 构建一个项目管理应用程序。
When I send out query from reactjs it gets a response with the data below当我从 reactjs 发出查询时,它会收到带有以下数据的响应
{
"data":{
"clients":[
{
"name":"Okoye Ifeoma",
"email":"ify@mail.com",
"phone":"0805-854-754-580"
}
]
}
}
But it does not show the data on the browser instead it display the following error on the console但它没有在浏览器上显示数据,而是在控制台上显示以下错误
Error: Array.prototype.map() expects a return value from arrow function错误:Array.prototype.map() 需要箭头函数的返回值
Clients客户
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>
)}
</>
);
};
ClientRow客户行
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>
);
}
The arrow function in Clients > tbody is not returning anything. Clients > tbody 中的箭头函数没有返回任何内容。
{
data.clients.map(
client => { <ClientRow key={client.id} client={client} /> }
)
}
When you enclose the body of an arrow function in {}s you must expressly return
a value.当您将箭头函数的主体包含在 {} 中时,您必须明确
return
一个值。
Simply enclose your JSX in parenthesis and return it from the function.只需将您的 JSX 括在括号中并从函数中返回它。
{
data.clients.map(
client => { return (
<ClientRow key={client.id} client={client} />
)}
)
}
我对 graphql 不感兴趣,但您可以检查是否获取了数据。
data && data.clients.map(client => {.....})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.