ReactClassInterface：您试图在您的组件上多次定义“构造函数”。这个冲突可能是由于mixin

Question

因此，我在尝试创建 Apollo/GraphCool 订阅时遇到了问题，它抛出了以下错误消息：

[React Transform HMR] There was an error updating C:/Users/d0475/Documents/Projects/learn-redux-graphql/client/components/Comments.js:
(anonymous) @ index.js:59
hotApply @ bootstrap ac9bfc0…:514
cb @ process-update.js:52
hotUpdateDownloaded @ bootstrap ac9bfc0…:311
hotAddUpdateChunk @ bootstrap ac9bfc0…:283
webpackHotUpdateCallback @ bootstrap ac9bfc0…:4
(anonymous) @ 0.92fd6f4….hot-update.js:1
index.js:60 Error: ReactClassInterface: You are attempting to define `constructor` on your component more than once. This conflict may be due to a mixin.
    at invariant (invariant.js:39)
    at validateMethodOverride (ReactClass.js:384)
    at mixSpecIntoComponent (ReactClass.js:420)
    at Object.createClass (ReactClass.js:726)
    at Object.<anonymous> (Comments.js?32c0:17)
    at Object.748 (0.92fd6f4….hot-update.js:207)
    at __webpack_require__ (bootstrap ac9bfc0…:555)
    at Object.hotApply [as apply] (bootstrap ac9bfc0…:510)
    at cb (process-update.js:52)
    at hotUpdateDownloaded (bootstrap ac9bfc0…:311)
    at hotAddUpdateChunk (bootstrap ac9bfc0…:283)
    at webpackHotUpdateCallback (bootstrap ac9bfc0…:4)
    at 0.92fd6f4….hot-update.js:1

我的Comments.js内容如下：

import { subscriptionObservable } from '../apolloClient';

const Comments = React.createClass({
  
  constructor() {
    this.subscription = this.subscribe();
    console.log(`Subscribed for new messages with ID: ${this.subscription._networkSubscriptionId}`);
  },
  subscribe() {
    return subscriptionObservable.subscribe({
      error: (error) => {
        console.log(`Subscription error: ${error}`);
      },
      next: (result) => {
        console.log(`Subscription result: ${result}`);
      }
    });
  },
  render() {
    const comments = this.props.post.comments || [];
    return (
      <div className="comments">

        {_.map(comments, this.renderComment)}

        <form onSubmit={this.handleSubmit} ref="commentForm" className="comment-form">
          <input type="text" ref="author" placeholder="author"/>
          <input type="text" ref="comment" placeholder="comment"/>
          <input type="submit" hidden/>
        </form>
      </div>
    );
  }
});

Comments.propTypes = {
  client: React.PropTypes.instanceOf(ApolloClient).isRequired,
}
const CommentsWithApollo = withApollo(Comments);

export default CommentsWithApollo;

而我的apolloClient.js内容如下：

import ApolloClient, {
  createNetworkInterface,
  addTypeName,
} from 'apollo-client';

import { 
    SubscriptionClient, 
    addGraphQLSubscriptions,
} from 'subscriptions-transport-ws';

import { 
  Subscription_Add_Delete_Comment_Query,
} from './graphql/mutations-queries';

// Create WebSocket client
const wsClient = new SubscriptionClient('wss://subscriptions.graph.cool/v1/myID', {
  reconnect: true,
  connectionParams: {
    // Pass any arguments you want for initialization
  }
})
const networkInterface = createNetworkInterface({ 
  uri: 'https://api.graph.cool/simple/v1/myID',
  opts: {
    // Additional fetch options like `credentials` or `headers`
    credentials: 'same-origin',
  }
})

const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
  networkInterface,
  wsClient
)

const client = new ApolloClient({
  networkInterface: networkInterfaceWithSubscriptions,
  dataIdFromObject: (o) => o.id,
   addTypeName: true
})

let createDeleteSubscription = {
  query: Subscription_Add_Delete_Comment_Query,
  variables: {}
};

export let subscriptionObservable = client.subscribe(createDeleteSubscription);

export default client;

我在这里忽略了什么？

Answer 1

您在这里忽略的事实是，您正在混合使用 react 的 es6 和 es5 语法。

在 ES5 语法中，这就是创建组件的方式 -> const Comments = React.createClass 这里不需要定义构造函数。 createClass 为您完成。

在 ES6 语法中，这就是创建组件的方式 -> class Comments extends React.Component 在这里你必须定义你自己的构造函数。

您可以做的是完全切换到新语法，或者在 componentWillMount 或 componentDidMount.

等生命周期方法中执行 this.subscription = this.subscribe();

ReactClassInterface：您试图在您的组件上多次定义“构造函数”。这个冲突可能是由于mixin

ReactClassInterface: You are attempting to define `constructor` on your component more than once. This conflict may be due to a mixin

javascript

apollo

reactjs