accessing state inside calculatestate from componentdidmount - reactjs

Question

I am new to flux and react and I would like to know how can I access state inside calculatestate() from
componentdidmount()?
how can I access events state inside componentdidmount()? I would like loop through events and then run a query per event, which in turn updates another store.
static getStores() {
return [SomeStore];
}
static calculateState(prevState, props) {
const somestore = SomeStore.getState();
return {
events: SomeStore.getState(),
};
}
componentdidmount(){
//this.state.events;
//need to do some query based on the events
//this query will update another store.
}

Answer 1

You need to use the lifecycle methods to understand the componentDidMount method which are outlined here
To initialise the localstate, you should use the constructor method (static can also be used as an alternative, but jsfiddle throws an error.
To show the initial state, you can log within componentDidMount with this.state.
const someStore = ["event"];
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = { events: someStore };
}
// if you want to change state based on props
shouldComponentUpdate(nextProps, nextState) {
// change state if you want here
if (this.state.events.length !== nextState.events.length) {
console.log(this.state, nextState)
return true // update
}
return false
}
// get initial state
componentDidMount() {
console.log(this.state.events);
}
render() {
return (
<div>
<span>example</span>
<button onClick = {() => {
this.setState(state => {
return {
events: [...state.events, "new event"]
}
})
}}>Add Event</button>
<div>
events: { JSON.stringify(this.state.events) }
</div>
</div>
)
}
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"));
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>