从React向GraphQL服务器查询时发生意外错误[重复]

我收到一个错误: 当我对后端GraphQL服务器进行查询时,应该进行赋值或函数调用,而是在map函数内的Query Tag和div处看到了一个表达式。

这是我的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;

这是因为我使用了map函数造成的错误吗? 请帮助我解决这些类型的问题,因为与其他语言/框架相比,在React代码中查找错误变得有些困难。

评论
Ken
Ken

您没有在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>
      )
   )
);

please check this post for information on the above syntaxes

点赞
评论