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

Answer 2

而且您不需要等待返回res.json（）getResource = async () => {&nbsp; &nbsp; const res = await fetch(`${this._apiPath}${this._logUrl}`);&nbsp; &nbsp; if (!res.ok) {&nbsp; &nbsp; &nbsp; &nbsp; throw new Error(`Could not fetch ${this._logUrl}` +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; `, received ${res.status}`)&nbsp; &nbsp; }&nbsp; &nbsp; return res.json();};