WrappedComponent 未定义

Posted 2023-03-10

【中文标题】WrappedComponent 未定义

【英文标题】：WrappedComponent is undefined

【发布时间】：2018-05-02 23:48:47

【问题描述】：

我一直在尝试使用 react-apollo 和 graphcool 实现 graphql。我正在关注这个Tutorial

我的请求查询代码如下所示：

import React from 'react';
import  graphql  from 'react-apollo'
import gql from 'graphql-tag'

const ALL_INSPECTIONS_QUERY = gql`
  # 2
  query AllInspectionsQuery 
    allInspections 
      id
      date
      observation
      note
      next
      temporality
      components
      done
    
  
`

// 3
export default graphql(ALL_INSPECTIONS_QUERY,  name: 'allInspectionsQuery' )(InspectionRow)

export  InspectionTable 

class InspectionRow extends React.Component 

  render() 
    if (this.props.allInspectionsQuery && this.props.allInspectionsQuery.loading) 
      return <div>Loading</div>
    

    if (this.props.allInspectionsQuery && this.props.allInspectionsQuery.error) 
      return <div>Error</div>
    

    const linksToRender = this.props.allInspectionsQuery.allLinks
    return (
      // some code
    );
  


class InspectionTable extends React.Component 
    // some other code

在我尝试添加查询之前一切正常。 Graphcool 也在工作，我得到了一些数据。

我现在收到此错误：

TypeError: WrappedComponent is undefined
getDisplayName
node_modules/react-apollo/react-apollo.browser.umd.js:230

  227 |     return fields;
  228 | 
  229 | function getDisplayName(WrappedComponent) 
> 230 |     return WrappedComponent.displayName || WrappedComponent.name || 'Component';
  231 | 
  232 | var nextVersion = 0;
  233 | function graphql(document, operationOptions) 

wrapWithApolloComponent
node_modules/react-apollo/react-apollo.browser.umd.js:246

  243 | var operation = parser(document);
  244 | var version = nextVersion++;
  245 | function wrapWithApolloComponent(WrappedComponent) 
> 246 |     var graphQLDisplayName = alias + "(" + getDisplayName(WrappedComponent) + ")";
  247 |     var GraphQL = (function (_super) 
  248 |         __extends$2(GraphQL, _super);
  249 |         function GraphQL(props, context) 

./src/components/inspection.js
src/components/inspection.js:53

  50 | `
  51 | 
  52 | // 3
> 53 | export default graphql(ALL_INSPECTIONS_QUERY,  name: 'allInspectionsQuery' )(InspectionRow)
  54 | 
  55 | export  InspectionTable 
  56 | 

这是项目文件夹的树：

├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── server
│   ├── graphcool.yml
│   ├── package.json
│   ├── src
│   │   ├── hello.graphql
│   │   └── hello.js
│   └── types.graphql
└── src
    ├── components
    │   ├── App.js
    │   ├── data.js
    │   ├── description.js
    │   ├── inspection.js
    │   └── maintenance.js
    ├── index.css
    ├── index.js
    └── registerServiceWorker.js

我已经安装了所有需要的 npm 包，但是在安装 react-apollo 包时我收到了这条消息：

react-apollo@2.0.1" has unmet peer dependency "apollo-client@^2.0.0"

我真的不知道这是从哪里来的，谢谢你的帮助！我是 *** 的新手，所以请告诉我我的解释是否应该更准确。

【问题讨论】：

你在使用withApollo HOC吗？

我是新手，但我想我不是，我只是按照我在帖子中的链接中的教程进行操作。我只更改了数据。

我添加了这条警告纱线消息：react-apollo@2.0.1" has unmet peer dependency "apollo-client@^2.0.0"

【参考方案1】：

终于解决了，只是导出的问题：

export default graphql(ALL_INSPECTIONS_QUERY,  name: 'allInspectionsQuery' )(InspectionRow)

export  InspectionTable 

应该是

export default graphql(ALL_INSPECTIONS_QUERY,  name: 'allInspectionsQuery' ) (InspectionTable)