Как записать результат запроса в состояние React?

Question

[Александр Гримашевич]

Добрый вечер.
Полдня долблюсь с тем, чтобы записать результат запроса в состояние React.
Весь код:

import React, { Component } from "react";
import ReactDOM from "react-dom";
import axios from "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>
                    <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>
                <small>Donec id elit non mi porta.</small>
            </a>
        );
    }

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

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

Уверен, опытный разработчик за секунду поймет в чем проблема и подскажет. Смысл в том, что по /api/all-calcs мы получаем массив с постами. Их нужно записать в this.state.calcs, чтобы можно было использовать в методе getCalcs.
Помогите, пожалуйста, разобраться что не так делаю.

Answer 1

[hzzzzl]

Переложи вызов fetchData в componentDidMount, а вызов getCalcs в рендер перед ретурном при условии что calcs в стейте уже заполнены , типа if (this.state.calcs.length) { this. getCalcs() }

Comments

[Александр Гримашевич]

Огромнейшее спасибо!!! То, что нужно. Я столько времени потратил, а тут за минуту)) Спасибо большое!

[hzzzzl]

Александр Гримашевич, помогло бы между вызовами этих двух функций в конструкторе сделать console.log стейта :) тогда видно что после вызова fetchData массив заполняется не сразу и getCalcsам ещё не с чем работать

[Александр Гримашевич]

hzzzzl, спасибо за совет!

Answer 2

[bugagashnik]

Подробнее напиши, на каком этапе проблема? Запрос выполняется? Успешно? Дата приходит с запроса?