首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >div上Const的ReactJS值

div上Const的ReactJS值
EN

Stack Overflow用户
提问于 2019-06-20 08:11:48
回答 2查看 472关注 0票数 0

我是react的新手,我有一个简单的应用程序,如下所示:

我使用这个应用程序的目的是使用一个Spring Boot REST Service,并在我的react应用程序上打印数据json

我通过以下教程实现了这一点:https://github.com/marmelab/restful.js/tree/master

但是现在我遇到了一个简单的问题,不知道如何在html标签上打印值,这是我的代码的一个例子:

代码语言:javascript
复制
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包含请求的值,请求结构如下:

代码语言:javascript
复制
{
  "remissionOk": 109,
  "remissionAlert": 5,
  "remissionError": 17,
  "remissionOutOfTime": 82
}

有人能告诉我如何在html上将此totalsOrders打印为我的文本"Hello World“吗?致以问候。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-06-20 08:17:03

首先,你需要改变一些东西。

  1. 您的totalOrders对象需要在RestGps类的作用域内。
  2. 您没有使用states,这会导致许多奇怪的行为!

我建议做以下几件事:

代码语言:javascript
复制
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.textrender函数中引用您的状态,然后将其作为文本节点添加到<p>

票数 1
EN

Stack Overflow用户

发布于 2019-06-20 08:16:29

您可以使用生命周期方法。

代码语言:javascript
复制
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>
        )
    }
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56677420

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档