gpt4 book ai didi

javascript - ReactJS:获取JSON

转载 作者:行者123 更新时间:2023-11-30 11:05:36 25 4
gpt4 key购买 nike

我有一个名为“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'。或者,可能还有另一种方法可以做到这一点?

最佳答案

getResource 是异步的,因此在将其放入组件状态之前,您需要等待返回的 promise 得到解决。

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

关于javascript - ReactJS:获取JSON,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55751623/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com