Javascript ReactJS：获取JSON

我有一个名为“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>
        );
    }
}

res.json（）：

网络.答复：

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

正如我们所看到的，JSON被包装在Promise中。 它将以未定义的形式提交到“App”，并在响应this.state.data后显示为：

data: {
    id: undefined,
    created: undefined
}

---

请给我建议，如何正确获取数据并将其发送到组件“应用程序”。或者，可能还有另一种方法吗？

getResource

是异步的，因此您需要等待返回的承诺得到解决，然后才能将其置于组件状态

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

{
这是我的国家({
数据：等待api.getResource（），
点击：对
});
}}
>
Нажать

并且您不需要等待返回res.json（）

---

api.getResource（）

可能是一个异步调用，这就是为什么您会得到返回值

undefined

。

async

函数总是返回一个承诺。

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

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