How to write the query result into a state React?

Good evening.
Dolblyus half a day to write the query result into a state of React.
The whole code:
import React { Component } from "react";
import ReactDOM from "react-dom";
import from axios "axios";

export default class AllCalcs extends Component {
 constructor (props) {
super(props);

 this.state = {
 calcs: []
};

 this.listItems = ";

this.fetchData();
this.getCalcs();
}

 fetchData() {
axios.post('/api/all-calcs')
 .then(response => this.setState({calcs: response.data}))
 .catch(error => console.log(error));
}

 getCalcs() {
 this.listItems = this.state.calcs.map((calc, index) =>
 <a key={index} href="#" className="list-group-item list-group-item-action flex-column align-items-start">
 <div className="d-flex w-100 justify-content-between">
 <h5 className="mb-1">{calc.h1}</h5>
 the <small>3 days ago</small>
</div>
 <p className="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
 risus varius blandit.</p>
 the <small>Donec id elit non mi porta.</small>
</a>
);
}

 render() {
 return (
the <div>
 <div className="list-group">
{this.listItems}
</div>
</div>
);
}
}

if (document.querySelector('#all-calcs')) {
 ReactDOM.render(<AllCalcs />, document.querySelector('#all-calcs'));
}


Sure, an experienced developer of a second to understand what the problem is and advise. The point is that /api/all-calcs we get an array of posts. They need to record this.state.calcs that you can use in the method getCalcs.
Please help me to understand what I do wrong.
March 19th 20 at 08:42
2 answers
March 19th 20 at 08:44
Solution
Place the fetchData call in componentDidMount and call getCalcs in the render before returnon provided that calcs in a state already filled in , type if (this.state.calcs.length) { this. getCalcs() }
Thank you!!! What you need. I spent a lot of time, and here for a moment)) Thank you very much! - Edgar_Wilderman commented on March 19th 20 at 08:47
@Edgar_Wildermanwould help between calls to these two functions in the constructor to make a console.log state :) then it is evident that after the call to fetchData array is filled immediately and getCalcsам still nothing to work with - johann.Stanton commented on March 19th 20 at 08:50
@johann.Stanton, thanks for the advice! - Edgar_Wilderman commented on March 19th 20 at 08:53
March 19th 20 at 08:46
Read more write, at what stage the problem? The query runs? Successful? The date comes from the request?

Find more questions by tags React