亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

ReactJS:獲取JSON

ReactJS:獲取JSON

Cats萌萌 2021-04-30 10:06:15
我有一個名為“ 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”。或者,也許還有另一種方法?
查看完整描述

2 回答

?
白衣非少年

TA貢獻1155條經驗 獲得超0個贊

getResource 是異步的,因此您需要等待返回的promise解析后再將其置于組件狀態。


<button

  className=" btn btn-outline-secondary"

  onClick={async () => {

    this.setState({

      data: await api.getResource(),

      clicked: true

    });

  }}

>

  Нажать

</button>


查看完整回答
反對 回復 2021-05-06
?
當年話下

TA貢獻1890條經驗 獲得超9個贊

而且您不需要等待返回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();

};


查看完整回答
反對 回復 2021-05-06
  • 2 回答
  • 0 關注
  • 242 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號