我是react的新手,我有一个简单的应用程序,如下所示:
我使用这个应用程序的目的是使用一个Spring Boot REST Service,并在我的react应用程序上打印数据json。
我通过以下教程实现了这一点:https://github.com/marmelab/restful.js/tree/master
但是现在我遇到了一个简单的问题,不知道如何在html标签上打印值,这是我的代码的一个例子:
import React from 'react';
import request from 'request';
import restful, { requestBackend } from 'restful.js';
const api = restful('http://someUrl/v1/mobile', requestBackend(request));
const totals = api.one('statusOrders',1); //organizationID = 1
totals.get().then((response) => {
const requestBody = response.body();
const totalsOrders = requestBody.data(); /*Need to print this on the <div>**/
})
class RestGps extends React.Component {
render(){
return(
<div className="container">
<p>Hello World</p>
//Here I want to print the values.
</div>
)
}
}
export default RestGps
const totalsOrders包含请求的值,请求结构如下:
{
"remissionOk": 109,
"remissionAlert": 5,
"remissionError": 17,
"remissionOutOfTime": 82
}
有人能告诉我如何在html上将此totalsOrders打印为我的文本"Hello World“吗?致以问候。
发布于 2019-06-20 08:17:03
首先,你需要改变一些东西。
totalOrders
对象需要在RestGps
类的作用域内。states
,这会导致许多奇怪的行为!我建议做以下几件事:
import React from 'react';
import request from 'request';
import restful, { requestBackend } from 'restful.js';
const api = restful('http://someUrl/v1/mobile', requestBackend(request));
const totals = api.one('statusOrders',1); //organizationID = 1
class RestGps extends React.Component {
state = { text: "loading ..." };
componentDidMount = () => {
totals.get().then((response) => {
const requestBody = response.body();
const totalsOrders = requestBody.data(); // assuming this is object
this.setState({ text: JSON.stringify(totalsOrders) });
})
}
render = () => {
return(
<div className="container">
<p>{this.state.text}</p>
//Here I want to print the values.
</div>
)
}
}
export default RestGps
为什么要使用状态?
井。最初,您的组件不会显示任何数据。这是因为get
需要时间来获取远程资源。
那么,什么将告诉react重新呈现组件,以便在加载资源后显示文本?没什么!这就是你需要使用状态的原因。
什么是componentDidMount
componentDidMount
是react生命周期的一个功能部分。它在组件最初呈现时调用。当它呈现时,您希望获取资源,然后更新我们的状态。
我们如何将字符串传递给段落元素?
这很简单,您可以使用this.state.text
在render
函数中引用您的状态,然后将其作为文本节点添加到<p>
中
发布于 2019-06-20 08:16:29
您可以使用生命周期方法。
class RestGps extends React.Component {
state = {
totalsOrders : null,
};
componentDidMount() {
const api = restful('http://someUrl/v1/mobile', requestBackend(request));
const totals = api.one('statusOrders',1); //organizationID = 1
totals.get().then((response) => {
const requestBody = response.body();
const totalsOrders = requestBody.data(); /*Need to print this on the <div>**/
this.setState({totalsOrders: totalsOrders });
})
}
render(){
const {totalsOrders} = this.state;
return(
<div className="container">
<p>Hello World</p>
totalsOrders.map(item => {
{item}
});
</div>
)
}
}
https://stackoverflow.com/questions/56677420
复制相似问题