1

我有很多模板组件，它们的使用方式彼此相似。在渲染到页面之前，模板组件被包裹在 graphql 中并连接到 redux。我想创建一个 HOC 来包装我的模板，这样我就不会每次都创建一个新容器来将模板连接到数据。像这样：

这是我的页面组件，我尝试用gqlList HOC包装AppointmentsListTemplate模板：

import React from 'react'
import { AdminTemplate, AppointmentsListTemplate } from 'components'
import { gqlList } from 'containers'
import {qyListAppointments} from 'services/gqlQueries/Appointments'

const AppointmentsListTemplateWrapped = gqlList(AppointmentsListTemplate, qyListAppointments)

const AdminAppointmentsPage = (props) => {
    return (
        <AdminTemplate>
            <AppointmentsListTemplateWrapped />
        </AdminTemplate>
    )
}

export default AdminAppointmentsPage

这是我的 gqlList HOC：

import React, {Component} from 'react'
import { graphql } from 'react-apollo'
import { connect } from 'react-redux'
import { saveQueryVars } from 'store/helper/actions'

const gqlList = (WrappedComponent, gqlQuery) => {

  const GQL = graphql(gqlQuery)(WrappedComponent)
  return connect(null, {
    saveQueryVars,
  })(GQL)
}
export default gqlList

但是 graphql 连接器部分向我抛出了这个错误：

未捕获的类型错误：无法在新 eval （gqlList.js:22 ) 在 eval (createClassProxy.js:95) 在 Unknown (eval at proxyClass (createClassProxy.js:NaN), :4:17) 在 eval (ReactCompositeComponent.js:303) 在 measureLifeCyclePerf ( ReactCompositeComponent.js:73) 在 ReactCompositeComponentWrapper._constructComponentWithoutOwner

我究竟做错了什么？

4

2 回答 2

1

据我所知，您的代码似乎没有任何问题。我还将排除 redux 作为错误的来源。但这是我的建议：

检查您的 GraphQL 查询 (gqlQuery)，以便它获得所需的内容并返回您需要的内容。我怀疑它需要一些参数，但没有得到正确的参数类型 - 导致类型错误。这是一个如何传递参数的示例（没有redux）：

const Data = graphql(fetchData, { options: {variables: {id: this.getId()} }})(Thing);

在这里， fetchData 需要事物的 id 并返回有关该事物的数据。然后你可以渲染<Data/>.

您可能希望通过向其添加查询和变量 (saveQueryVars) 来改进您的问题。另外，请提及 react-apollo 的版本，因为这是引发错误的模块。附带说明一下，来自 Apollo 客户端的错误消息不是很有帮助。

于 2017-12-29T07:27:53.733 回答
0

您可以将它们链接在一起：

import { changeFoo } from './myReduxActions';

const QUERY = gql`{ FindSomething { Id, Value }}`;

const myComponent = connect(
   store => ({
      foo: store.fooReducer.foo
   }),
   dispatch => ({
      changeFoo: (val) => dispatch(changeFoo(val))
   })
)(graphql(QUERY)(
   {props.data.loading && return <div>Loading...</div>}

   let myNewFoo = 'abc';
   return props.data.FindSomething ?
       <div>{`Id is ${props.data.FindSomething.Id}, redux store value foo is ${props.foo}`}
       <div onClick={() => props.ChangeFoo(myNewFoo)}></div></div> :
       props.data.error ? <div>Error {props.data.error}</div> : null;
));

所以你可以做connect(graphql(pureComponent)))或写成connect => graphql => component. 您可以更改 graphql 的顺序并连接。

于 2018-06-19T14:22:39.357 回答