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

您必须更改构造函数，因为您通过构造函数方法参数接收了props和context：

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
    };

ReactJS商店 - this.context.getStore不是一个函数（...）

2 个答案: