javascript - div 上 Const 的 ReactJS 值

Question

我是 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

consttotalsOrders 包含请求的值，请求结构如下:

{
  "remissionOk": 109,
  "remissionAlert": 5,
  "remissionError": 17,
  "remissionOutOfTime": 82
}

有人可以告诉我如何在我的 html 上打印这个 totalsOrders 作为我的文本“Hello World”吗？问候。

Answer 1

首先你需要改变一些事情。

1. 您的totalOrders对象需要在您的 RestGps 的范围内类。
2. 您没有使用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 生命周期的一个函数部分。当组件最初渲染时调用它。当它渲染时，您想要获取资源，然后更新我们的状态。

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

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