使用apollo的React.js查询graphql-错误：对象作为React子对象无效

Question

我在使用apollo查询graphqlendpoint时遇到了React.js问题。下面是有问题的代码。

class ChecklistSummaryTime extends Component {
constructor(props) {
    super(props);
    this.state = {
       data: [],
       sitePath: window.location.pathname
    }
 }

 render() {
     return(
        <ApolloProvider client={getGraphqlClient()}>
            <Query query={gql`
                {
                    all_checklist_time (checklist_type: "backup", order_by: "check_year check_month", 
                            sort_order: "desc desc", group_by: "check_month check_year") {
                            quarter,
                            month,
                            year
                    }
                }
            `}>
            {({ loading, error, data }) => {
                if (loading) return "Loading...";
                if (error) return `Error! ${error.message}`;
                console.log(data);
                return data;
            }}
            </Query>
        </ApolloProvider>
     );
 }}

它的错误是“error：对象作为React子对象无效（found：object with keys{all_checklist_time}）。如果要呈现子集合，请使用数组。”

Answer 1

您看到的错误意味着return data正在返回一个对象，该对象不是有效的React子对象。您应该将其转换为数组、文本或组件。如果all_checklist_time是数组，则只需返回data.all_checklist_time。