ReactJS:获取 JSON
ReactJS: obtaining 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>
);
}
}
当我按下按钮时,组件 'Api' 向后端发送请求,我重新接收 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():
Network.Response:
{"id":87,"created":"2019-04-18 17:26:28.948"}
如我们所见,JSON 包装到 Promise 中。
它以未定义的形式进入 'App',响应后 this.state.data 看起来像:
data: {
id: undefined,
created: undefined
}
请指教,如何正确的获取数据并发送给组件'App'。或者,也许还有另一种方法?
getResource
是异步的,所以你需要等待返回的 promise 被 resolved 之后再将它放入你的组件状态。
<button
className=" btn btn-outline-secondary"
onClick={async () => {
this.setState({
data: await api.getResource(),
clicked: true
});
}}
>
Нажать
</button>
而且您不需要等待 return 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();
};
我有一个名为 '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>
);
}
}
当我按下按钮时,组件 'Api' 向后端发送请求,我重新接收 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():
Network.Response:
{"id":87,"created":"2019-04-18 17:26:28.948"}
如我们所见,JSON 包装到 Promise 中。 它以未定义的形式进入 'App',响应后 this.state.data 看起来像:
data: {
id: undefined,
created: undefined
}
请指教,如何正确的获取数据并发送给组件'App'。或者,也许还有另一种方法?
getResource
是异步的,所以你需要等待返回的 promise 被 resolved 之后再将它放入你的组件状态。
<button
className=" btn btn-outline-secondary"
onClick={async () => {
this.setState({
data: await api.getResource(),
clicked: true
});
}}
>
Нажать
</button>
而且您不需要等待 return 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();
};