ReactJS商店 - this.context.getStore不是一個函數（...）

Question

我：

import React from 'react'; 
import FilterButton from './FilterButton'; 
import FilterJobsScreen from '../../actions/jobs-screen/FilterJobsScreen'; 

import JobStore from '../../stores/JobStore'; 

export default class RightPanel extends React.Component { 

    static contextTypes = { 
     getStore: React.PropTypes.func.isRequired 
    }; 

    constructor() { 
     super(); 
    } 

    componentWillMount() { 
     this.setState({ 
      counts: this.context.getStore(JobStore).getCounts() 
     }); 
     this.context.getStore(JobStore).on('change',() => { 
      this.setState({ 
       counts: this.context.getStore(JobStore).getCounts() 
      }); 
     }); 
    } 

    componentDidMount() { 
     this.load(); 
    } 

    load() { 

    } 

    onClick(e) { 
     var filters_array = this.state.filters; 
     var idx = filters_array.indexOf(e); 
     if (idx === -1) { 
      filters_array.push(e); 
     } else { 
      filters_array.splice(idx, 1); 
     } 
     this.setState({ 
      filters: filters_array 
     }) 
     this.context.executeAction(FilterJobsScreen, this); 
    } 

    render() { 
     return (
      <div> 
       <div className="controls"> 
        <span className="title">Filters</span> 
        <FilterButton onClick={this.onClick.bind(this, 'My jobs')} name='My jobs' 
            count={this.state.counts.my_jobs} active={true}/> 
        <FilterButton onClick={this.onClick.bind(this, 'Not approved')} name='Not approved' 
            count={this.state.counts.not_approved}/> 
        <FilterButton onClick={this.onClick.bind(this, 'Supply')} name='Supply' 
            count={this.state.counts.supply}/> 
        <FilterButton onClick={this.onClick.bind(this, 'Repair')} name='Repair' 
            count={this.state.counts.repair}/> 
        <FilterButton onClick={this.onClick.bind(this, 'Service exchange')} name='Service exchange' 
            count={this.state.counts.service_ex}/> 
        <FilterButton onClick={this.onClick.bind(this, 'Urgent')} name='Urgent' 
            count={this.state.counts.urgent}/> 
        <FilterButton onClick={this.onClick.bind(this, 'Today')} name='Today' 
            count={this.state.counts.today}/> 
        <FilterButton onClick={this.onClick.bind(this, 'Overdue')} name='Overdue' 
            count={this.state.counts.overdue}/> 
       </div> 
       <div className="controls"> 
        <span className="title">Sorts</span> 
       </div> 
      </div> 
     ) 
    } 
}; 

RightPanel.contextTypes = { 
    executeAction: React.PropTypes.func.isRequired 
}; 

export default RightPanel; 

但是當我嘗試加載它給我的錯誤頁面：

this.context.getStore is not a function 

但我把它放在最上面：

static contextTypes = { 
     getStore: React.PropTypes.func.isRequired 
    }; 

我哪裏錯了？

---

這裏是我的商店：

import { EventEmitter } from 'events'; 

class JobStore extends EventEmitter { 

    constructor() { 
     super(); 
     this.jobs = new Map(); 
     this.counts = {}; 
    } 

    handleJobsData(payload) { 
     console.log(payload) 
     if (payload.clear === true) { 
      this.jobs = new Map(); 
     } 
     payload.data.jobs.forEach((job) => { 
      this.jobs.set(job.id, job); 
     }); 
     this.counts = payload.data.counts; 

     this.emit('change'); 

    } 

    getCounts() { 
     return this.counts; 
    } 

    getJobs() { 
     return this.jobs; 
    } 

    dehydrate() { 
     return this.jobs; 
    } 

    rehydrate (state) { 

    } 

} 

JobStore.dispatchToken = null; 

JobStore.handlers = { 
    'RECEIVED_JOBS_DATA': 'handleJobsData' 
}; 

JobStore.storeName = 'JobStore'; 

export default JobStore; 

Answer 1

你必須改變你的構造，因爲你通過構造方法參數收到你的道具和背景：

constructor(props, context) { 
    super(props, context); 
} 

沒有這樣做你的屬性和上下文對象將會丟失。

Answer 2

我不知道爲什麼，但刪除後：

RightPanel.contextTypes = { 
    executeAction: React.PropTypes.func.isRequired 
}; 

export default RightPanel; 

它的工作原理。

，改變了頂部：

static contextTypes = { 
     getStore: React.PropTypes.func.isRequired, 
     executeAction: React.PropTypes.func.isRequired 
    };