javascript - 使用 GraphQL 查询组件时导出错误？

Question

我正在研究新的(很棒的)GraphQL 查询组件。我的导出声明似乎有问题。我收到控制台错误:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of App. .....App.js:30:4

.....

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. .....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 });

如何更正此错误？

在此先感谢大家提供的任何信息。

Answer 1

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