从 React 向 GraphQL 服务器进行查询时出现意外错误 [重复]

Posted 2023-02-21

【中文标题】从 React 向 GraphQL 服务器进行查询时出现意外错误 [重复]

【英文标题】：Unexpected error upon making a Query to GraphQL server from React [duplicate]

【发布时间】：2020-09-03 10:20:42

【问题描述】：

我收到一个错误： 期待一个赋值或函数调用，但在我的地图函数内的 查询标记 和 div 处看到了一个表达式，当我正在制作时对后端 GraphQL 服务器的查询。

这是我的 query.component.jsx 文件代码：

import React from 'react';
import Query from 'react-apollo';
import gql from 'apollo-boost';

const GET_COMMUNITY = gql`
    query Community 
        Community 
        isOpen
        member_count
        name
        description
        
    
`;

const TestQuery = () => 
    <Query query=GET_COMMUNITY>
        
            (loading,error, data:Community) => 
                if(loading) return <h1>Loading...</h1>;
                if(error) return <h1>Error occured...</h1>;
                return (
                    Community.map((item) =>
                        <div className="community_members">
                        <p>item.isOpen</p>
                        <p>item.member_count</p>
                        <p>item.name</p>
                        <p>item.description</p>
                        <br />
                        </div>
                    )
                );
            
        
    </Query>
;
export default TestQuery;

这个错误是因为我使用了地图功能吗？ 请帮助我解决这些类型的问题，因为与其他语言/框架相比，在 React 代码中查找错误变得有点困难。

【问题讨论】：

尝试将Community重命名为community

【参考方案1】：

您没有返回 map 内的值，这就是您收到此错误的原因。

您要么使用如下的显式返回

return (
    Community.map((item) => 
     return (    // return statement here
        <div className="community_members">
        <p>item.isOpen</p>
        <p>item.member_count</p>
        <p>item.name</p>
        <p>item.description</p>
        <br />
        </div>
      )
    )
);

或类似的隐式返回

return (
    Community.map((item) => ( // Implicit return
        <div className="community_members">
        <p>item.isOpen</p>
        <p>item.member_count</p>
        <p>item.name</p>
        <p>item.description</p>
        <br />
        </div>
      )
   )
);

请查看this post以获取有关上述语法的信息