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，已创建。要求：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>

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

};