Question

我遇到一些问题，当使用Query Apollo组件的以下功能组件添加到我的App.js中时，会引发错误。我无法弄清楚到底是怎么回事-我得到的错误是

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.

据我的研究表明，这表示导入错误或应用程序返回的函数未定义的错误。这不是导入错误，因为我已经三重检查了默认情况下是否正在导出和导入它。

对于上下文，我正在尝试根据数据库中是否存在值来有条件地呈现某个React组件。我的应用程序架构中具有该值，并且GraphQL查询似乎正在返回正确的文档节点。

以下代码：我的查询有条件地选择呈现哪种形式：

import React from 'react'
import PropTypes from 'prop-types'
import BillingForm from '../ConfigureBilling/BillingForm'
import gql from 'graphql-tag'
import Query from 'react-apollo'


import UpdateBilling from '../ConfigureBilling/UpdateBilling'


const STRIPE_QUERY = gql`
  query Workspace {
    workspaces(workspaceUuid: "test_workspace_id", withUsers: false) {
      stripeCustomerId
    }
  }
`
console.log(STRIPE_QUERY)

const BillingConfig = ({ workspace }) => {
  return (
    <Query query={STRIPE_QUERY}>
      {({ data }) => {
        const { workspaces } = data
        return workspaces.stripeCustomerId != null ? (
          <BillingForm workspace={workspace} />
        ) : (
          <UpdateBilling workspace={workspace} />
        )
      }}
    </Query>
  )
}

BillingConfig.propTypes = {
  workspace: PropTypes.object,
}

export default BillingConfig

我的index.js文件，该文件在我的应用程序中呈现了实际的组件：

import React from 'react'
import PropTypes from 'prop-types'
import GetWorkspace from '../GetWorkspace'
import Module from '../../app/Module'
import BillingForm from '../ConfigureBilling/BillingForm'
import BillingConfig from '../Data/BillingConfig'

import { Elements, StripeProvider } from 'react-stripe-elements';
import UpdateBilling from '../ConfigureBilling/UpdateBilling'

class Billing extends React.Component {
  menu = {
    nav: 'workspace',
  }

  render() {
    const { workspace } = this.props

    // Error handled
    if (!workspace) return <Module nada />

    return (
      <Module metaTitle={'Billing | ' + workspace.label} menu={this.menu}>
        <StripeProvider apiKey="TESTKEY">
          <Elements>
            <BillingForm workspace={workspace} />
          </Elements>
        </StripeProvider>
      </Module>
    )
  }
}

Billing.propTypes = {
  workspace: PropTypes.object,
}

export default GetWorkspace(Billing)

对于可能引发该错误的原因，有人有何想法？

Apollo查询组件未定义

0 个答案: