Блог

У меня есть компонент с именем «Приложение»:

 export default class App extends Component {

    state = {
        data: {
            id: null,
            created: null
        },
        clicked: false,
        loading: true
    };

    render() {
        const data = this.state.data.id === null ? null : <Data data={this.state.data}/>;
        const title = this.state.clicked ? <TitleDone/> : <Title/>;

        return (
            <div>
                {title}
                <div className="main">
                    <button
                        className=" btn btn-outline-secondary"
                        onClick={() => {
                            this.setState(() => {
                                return {
                                    data: api.getResource(),
                                    clicked: true
                                };
                            });
                        }}>
                        Нажать
                    </button>
                </div>
                <div className="main">
                    {data}
                </div>

            </div>
        );
    }
}
 

Когда я нажимаю кнопку, компонент «Api» отправляет запрос на серверную часть, и я повторно получаю JSON с 2 полями: id, создан.

Запрос:

 getResource = async () => {
    const res = await fetch(`${this._apiPath}${this._logUrl}`);

    if (!res.ok) {
        throw new Error(`Could not fetch ${this._logUrl}`  
            `, received ${res.status}`)
    }
    return await res.json();
};
 

res.json():

Сеть.Ответ:

 {"id":87,"created":"2019-04-18 17:26:28.948"}
 

Как мы видим, JSON завернут в Promise.
Он переходит к «приложению» как неопределенному, и после ответа this.state.данные выглядят как:

 data: {
    id: undefined,
    created: undefined
}
 

Пожалуйста, дайте мне совет, как правильно получить данные и отправить их в компонент «Приложение». Или, может быть, есть другой способ сделать это?

getResource является асинхронным, поэтому вам нужно дождаться разрешения возвращаемого обещания, прежде чем переводить его в состояние компонента.

 <button
  className=" btn btn-outline-secondary"
  onClick={async () => {
    this.setState({
      data: await api.getResource(),
      clicked: true
    });
  }}
>
  Нажать
</button>
 

И вам не нужно ждать возврата res.json()

 getResource = async () => {
    const res = await fetch(`${this._apiPath}${this._logUrl}`);

    if (!res.ok) {
        throw new Error(`Could not fetch ${this._logUrl}`  
            `, received ${res.status}`)
    }
    return res.json();
};