javascript - 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>
        );
    }
}

当我按下 Button 时，组件“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():

网络.响应:

{"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>