ReactJS：获取JSON

Question

我有一个名为'App'的组件：

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'向后端发送请求，我收到带有2个字段的JSON：id，created。

请求：

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（）：

Network.Response：

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

正如我们所见，JSON包含在Promise中。它将'App'作为未定义，并在响应this.state.data后看起来像：

data: {
    id: undefined,
    created: undefined
}

请给我建议，如何正确获取数据并将其发送到组件'App'。或者，可能是，有另一种方法可以做到这一点？

Answer 1

getResource是异步的，因此在将其置于组件状态之前，需要等待返回的promise。

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

Answer 2

你不需要等待返回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();
};