ReactClassInterface：您正試圖在您的組件上多次定義`constructor`。這種衝突可能是由於一個mixin

Question

所以，我在試圖創建一個阿波羅/ 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();。