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

【问题标题】：Unexpected error upon making a Query to GraphQL server from React [duplicate]从 React 向 GraphQL 服务器进行查询时出现意外错误 [重复]
【发布时间】：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

标签： reactjs graphql jsx

【解决方案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以获取有关上述语法的信息

【讨论】：