React setState - обновление рендера после получение новых данных

Question

Добрый день, есть 2 функции которые делают post & get запросы, помогите отрендерить полученные данные по клику. Помогите пожалуйста разобраться(

Post&Get:

export function getSidebar() {
    return axios.get('sidebar', {
        headers: authToken,
    })
        .then(response =>  {
            return response.data
        })
        .catch(error => {
            console.log(error)
        });
}

export function postSidebar(item) {
    return axios.request({
        url: `sidebar/item/add?itemId=${item}`,
        method: "post",
        baseURL: "http://localhost:8080/api/",
        headers: authToken,
    })
    .then(response => {
        return getSidebar(response.data);
    })
    .catch(error => {
        console.log(error)
    });
}

Где нужно отрендерить новые данные (не получается через componentWillMount):

import React, {Component} from "react";
import {Row, Col, Icon, Slider, Slide} from 'react-materialize'

import './SideBar.css';

import '../QuantityLoader/QuantityLoader.css'
import IconFont from '../IconFont/IconFont';
// import Item from '../Item/Item';
import Model from '../Model/Model';
import { deleteSidebar, getSidebar} from '../../services/http';

class SideBar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            mode: 'product',
            data: []
        };
        this.toggleMode = this.toggleMode.bind(this);
        this.handleClick = this.handleClick.bind(this);

    }

    handleClick(i) {
        const newStatus = this.state.buttonStatus.slice();
        newStatus[i] = !this.state.buttonStatus[i];
        this.setState({buttonStatus: newStatus});
    }


    toggleMode() {
        this.setState({
            mode: this.state.mode === 'product' ? 'model' : 'product'
        });
    }
    componentWillMount() {
        let data = getSidebar();
        this.setState({ data });
    }

    render() {
        let sidebar = this.state.data;
        console.log(sidebar); // Если тут написать getSidebar() - получаю новые данные по клику.

        return (
            <Row>
                <div className={this.state.mode === 'model' ? 'quantity-loader models' : 'quantity-loader products'}>
                    <a onClick={this.toggleMode}>
                        <IconFont name="exchange" size="2x" />
                    </a>
                    <p>{this.state.mode === 'model' ? 'Model' : 'Product'}&nbsp;
                        <span className="item-numbers">
                            {this.state.mode === 'model' ? this.props.selectedModels.length : this.props.selectedItems.length}
                        </span>
                    </p>
                </div>

                <div className="card-content products" style={{'display': this.state.mode === 'product' ? 'block' : 'none'}}>
                    {/*{sidebar.items.map((element, id) => {*/}
                        {/*if (element.type === "PRODUCT") {*/}
                            {/*return (*/}
                                    {/*<div key={id} onClick={() => {deleteSidebar(element.id);}}>*/}
                                        {/*{element.name}*/}
                                    {/*</div>*/}
                                {/*)*/}
                            {/*}*/}
                        {/*}*/}
                    {/*)}*/}
                </div>

                <div className="card-content models" style={{'display': this.state.mode === 'model' ? 'block' : 'none'}}>
                    {/*{sidebar.items.map((element, id) => {*/}
                            {/*if (element.type === "MODEL3D") {*/}
                                {/*return (*/}
                                    {/*<div key={id} onClick={() => {deleteSidebar(element.id);}}>*/}
                                        {/*{element.name}*/}
                                    {/*</div>*/}
                                {/*)*/}
                            {/*}*/}
                        {/*}*/}
                    {/*)}*/}
                </div>
            </Row>
        );
    }
}

export default SideBar;

Где происходит post запрос(по клику):

import React, {Component} from "react";
import {Col, Icon, Slider, Slide} from 'react-materialize';

import '../CardFlip/CardFlip.scss';
import IconFont from '../IconFont/IconFont';
import { postSidebar, getSidebar } from '../../services/http';

class Item extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        let item = this.props.item;
        return (
<IconFont id="add-to-card" name="folder" size="2x" border={true} className="icon-left" click={() => {this.props.addToFolder('item', item); postSidebar(item.id); getSidebar()}}/>
        )
    }
}

export  default Item;

при отправке post запроса такое передает:

Answer 1

Решение вашей проблемы очень простое, прочитать что такое promises, раз взялись использовать библиотеку, которая на них построена http://learn.javascript.ru/promise ссылка от @УткаУчитсяУму

Если все таки не разобрались, решение примерно такое

componentWillMount() {
    getSidebar().then((data) => {
        this.setState({ data });
    });
}

axios.get работает асинхронно и возвращает специальный объект еще до того, как будет осуществлен запрос на сервер. Естественно там нет данных от сервера. Чтобы получить данные от сервера при успешном запросе, используем .then() как указано в примере.