javascript - div上的Const的ReactJS值

我是React的新手，有一个简单的应用程序，如下所示：



该应用程序的目的是使用Spring Boot REST服务并在我的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上以文字“ Hello World”打印此totalsOrders吗？问候。

最佳答案

首先，您需要改变一些事情。


您的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需要时间来获取远程资源。

那么，一旦资源被加载，将如何响应以重新呈现组件以显示文本呢？没有！这就是为什么您需要使用状态的原因。

什么是componentDidMount？

componentDidMount是反应生命周期的功能部分。最初渲染组件时调用它。呈现时，您想获取资源，然后更新我们的状态。

我们如何将字符串传递到段落元素中？

这很简单，您可以使用render在this.state.text函数中引用状态，然后将其添加为<p>中的文本节点。