Извлечение данных из мангуста - PullRequest
Новая
       7

Извлечение данных из мангуста

0 голосов
/ 18 марта 2020

Я пытаюсь получить свои данные с понедельника go на стороне клиента, чтобы отреагировать. Мне удалось установить состояние компонента в правильные поля из API конечной точки моей БД. Но когда я хочу напечатать свое состояние, чтобы увидеть, работает ли консоль, напечатайте мой пустой объект, хотя состояние изменилось, и я вижу его в консоли. [Введите описание изображения здесь] [1] 

getDataFromDb = () => {
    const req = new Request('http://localhost:5000/family',{
        method: 'GET',
        cache: 'default'
    });

    fetch(req).then(res=>{
        return res.json();
    }).then(data=>{
        console.log(data);
        this.setState({
            rooms: data
        });
        console.log(this.state.rooms);
    }).
    catch(err=>{
       console("Error: " + err);
    });
};

 componentDidMount() {
    this.getDataFromDb().then(result => this.setState({rooms: result}));
    //let rooms = this.formatData(this.getDataFromDb());
    //let featuredRooms = ...rooms.filter(room => room.featured===true);
    //let maxPrice = Math.max(...rooms.map(item=>item.price));
    //let maxSize = Math.max(...rooms.map(item=>item.size));
    //new code:
     let featuredRooms = this.state.rooms.filter(room=>room.featured===true);
     let maxPrice = Math.max(this.state.rooms.map(item => item.price));
     let maxSize = Math.max(this.state.rooms.map(item=> item.size));
    this.setState({
        // old code ---> rooms,
        //rooms,
        featuredRooms,
        sortRooms: this.state.rooms,
        //old code
        //sortedRooms:rooms,
        loading:false,
        price:maxPrice,
        maxPrice,
        maxSize
        });

    this.printData();
}

1 Ответ

0 голосов
/ 18 марта 2020

В реакции setState является асинхронной c функцией. Печать состояния (только после его изменения) не даст вам последнее состояние. Если вы хотите вызвать функцию после установки состояния, вы можете сделать следующее: 

this.setState({
    // old code ---> rooms,
    //rooms,
    featuredRooms,
    sortRooms: this.state.rooms,
    //old code
    //sortedRooms:rooms,
    loading:false,
    price:maxPrice,
    maxPrice,
    maxSize
}, () => { this.printData(); });
...