ich habe:ReactJS Stores - this.context.getStore ist keine Funktion (...)
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;
Aber wenn ich versuche, die Seite zu laden es mir den Fehler geben:
this.context.getStore is not a function
Aber das bringe ich oben rein:
static contextTypes = {
getStore: React.PropTypes.func.isRequired
};
Wohin gehe ich falsch?
Hier ist mein Speicher:
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;
Ich bin immer noch die gleichen Fehler :( – imperium2335
Das nächste Problem, das Sie haben, ist, dass Sie Ihre Kontexttypen überschreiben RightPanel.contextTypes und die statische Deklaration sind gleich.. Dies ist der Grund für das korrekte Ergebnis nach dem Verschieben der ContextTypes in Ihrer Klasse. – CapCa