div上Const的ReactJS值
div上Const的ReactJS值
提问于 2019-06-20 08:11:48
我是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 RestGpsconst totalsOrders包含请求的值，请求结构如下：
{
"remissionOk": 109,
"remissionAlert": 5,
"remissionError": 17,
"remissionOutOfTime": 82
}有人能告诉我如何在html上将此totalsOrders打印为我的文本"Hello World“吗？致以问候。
回答 2
Stack Overflow用户
回答已采纳
发布于 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>中
Stack Overflow用户
发布于 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>
)
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56677420
复制相关文章
相似问题
腾讯云开发者
