使用 GraphQL 查询组件时导出错误？答案

【问题标题】：Export Error When Using GraphQL Query Components?使用 GraphQL 查询组件时导出错误？
【发布时间】：2018-09-17 16:47:04
【问题描述】：

我正在研究新的（很棒的）GraphQL 查询组件。我的出口声明似乎有问题。我收到控制台错误：

警告：React.createElement：类型无效——需要一个字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义。您可能忘记导出您的来自定义它的文件中的组件，或者您可能混淆了默认和命名导入。

检查App的渲染方法。 .....App.js:30:4

.....

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。 .....index.js/index.js:77:4

代码如下：

App.js

 1  import React from "react";
 2  import gql from "graphql-tag";
 3  import { graphql, Query } from 'react-apollo';
 4  import { withApollo } from "react-apollo";
 5  import ResolutionForm from "./ResolutionForm";
 6  import GoalForm from "./GoalForm";
 7  import RegisterForm from "./RegisterForm";
 8  import LoginForm from "./LoginForm";
 9  import Goal from "./resolutions/Goal";
10 
11  const RESOLUTIONS_QUERY = gql`
12    query Resolutions {
13      resolutions {
14        _id
15        name
16        completed
17        goals {
18          _id
19          name
20          completed
21        }
22      }
23      user {
24        _id
25      }
26    }
27  `;
28 
29  const App = ({ refetch }) => (
30      <Query
31          query={RESOLUTIONS_QUERY}
32          fetchPolicy={refetch ? 'cache-and-network': 'cache-first'}
33      >
34          {({ loading, data: {resolutions, client, user } }) => {
35              if (loading) return <span>loading....</span>
36              return (
37                  <div>
38                      {user._id ? (
39                          <button
40                              onClick={() => {
41                                  Meteor.logout();
42                                  client.resetStore();
43                              }}
44                          >
45                              Logout
46                          </button>
47                      ) : (
48                          <div>
49                              <RegisterForm client={client}/>
50                              <LoginForm client={client}/>
51                          </div>
52                      )}
53                      <ResolutionForm/>
54                      <ul>
55                          {resolutions.map(resolution => (
56                              <li key={resolution._id}>
57              <span
58                  style={{
59                      textDecoration: resolution.completed ? "line-through" : "none"
60                  }}
61              >
62                {resolution.name}
63              </span>
64                          <ul>
65                              {resolution.goals.map(goal => (
66                                  <Goal goal={goal} key={goal._id}/>
67                              ))}
68                          </ul>
69                          <GoalForm resolutionId={resolution._id}/>
70                      </li>
71                  ))}
72              </ul>
73                  </div>
74              );
75          }}
76      </Query>
77  );
78 
79  export default withApollo(App);

就命名导入与默认导入而言，这是匹配的导入语句，来自index.js：

import.js

14 import App from "../../ui/App";
   .....
70 const ApolloApp = () => (
71     <ApolloProvider client={client}>
72         <App />
73     </ApolloProvider>
74 );
75 
76 Meteor.startup(() => {
77     render(<ApolloApp />, document.getElementById("app"));
78 });

如何纠正这个错误？

提前感谢大家提供任何信息。

【问题讨论】：

你应该发布所有相关文件并且错误应该至少包含行号
已根据您的要求添加了行号。我相信所有相关文件都已包含在内。
当组件不是 React 组件、字符串或函数时会发生这种情况。通常这是因为其中之一是undefined。最简单的调试方法是中断渲染方法并查看组件或console.log 全部（console.log(Query, RegisterForm, ...)）。 PS：我认为您不需要 awaitQuery 包装高阶组件。
@Herku 这很有帮助！通过检查当时的数据，我发现我安装的 react-apollo 版本不包含 Query。更新后代码运行没有错误。如果您想输入您的回复作为答案，我会将其标记为已接受的答案。

标签： javascript meteor graphql apollo-client

【解决方案1】：

当组件不是 React 组件、字符串或函数时，会出现此错误消息。通常这是因为其中之一是undefined。最简单的调试方法是中断渲染方法并查看组件，或者console.log 全部（console.log(Query, RegisterForm, ...)）。

【讨论】：