Javascript div上常量的ReactJS值_Javascript_Java_Html_Reactjs_Rest

Javascript div上常量的ReactJS值

javascript java html reactjs rest

Javascript div上常量的ReactJS值,javascript,java,html,reactjs,rest,Javascript,Java,Html,Reactjs,Rest,我是react的新手，有一个简单的应用程序：我使用此应用程序的目的是使用Spring Boot REST服务，并在我的react应用程序上打印数据json 我在本教程中实现了这一点：但现在我遇到了一个简单的问题，不知道如何在html标记上打印值，下面是我的代码示例： import React from 'react'; import request from 'request'; import restful, { requestBackend } from 'restful.js';

我是react的新手，有一个简单的应用程序：

我使用此应用程序的目的是使用Spring Boot REST服务，并在我的react应用程序上打印数据json

我在本教程中实现了这一点：

但现在我遇到了一个简单的问题，不知道如何在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

有人能告诉我如何在我的html上打印这个totalsOrders作为我的文本“Hello World”吗？关于。

您可以使用生命周期方法

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>
        )
    }
}

类RestGps扩展React.Component{
状态={
totalsOrders:null，
};
componentDidMount（）{
constapi=restful（'http://someUrl/v1/mobile，requestBackend（request））；
const totals=api.one（'statusOrders'，1）；//organizationID=1
totals.get（）。然后（（响应）=>{
const requestBody=response.body（）；
const totalsOrders=requestBody.data（）；/*需要在**/
this.setState（{totalsOrders:totalsOrders}）；
})
}
render（）{
const{totalsOrders}=this.state；
返回(
你好，世界
totalsOrders.map（项目=>{
{item}
}); 
)
}
}

您可以使用生命周期方法

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>
        )
    }
}

类RestGps扩展React.Component{
状态={
totalsOrders:null，
};
componentDidMount（）{
constapi=restful（'http://someUrl/v1/mobile，requestBackend（request））；
const totals=api.one（'statusOrders'，1）；//organizationID=1
totals.get（）。然后（（响应）=>{
const requestBody=response.body（）；
const totalsOrders=requestBody.data（）；/*需要在**/
this.setState（{totalsOrders:totalsOrders}）；
})
}
render（）{
const{totalsOrders}=this.state；
返回(
你好，世界
totalsOrders.map（项目=>{
{item}
}); 
)
}
}

首先你需要改变一些事情

您的

totalOrders

对象需要在

RestGps

类的范围内

您没有使用

状态

，这可能会导致许多奇怪的行为我建议采取以下措施：

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

从“React”导入React；
从“请求”导入请求；
从“restful.js”导入restful，{requestBackend}；
constapi=restful（'http://someUrl/v1/mobile，requestBackend（request））；
const totals=api.one（'statusOrders'，1）//organizationID=1
类RestGps扩展React.Component{
状态={text:“正在加载…”}；
componentDidMount=（）=>{
totals.get（）。然后（（响应）=>{
const requestBody=response.body（）；
const totalsOrders=requestBody.data（）；//假设这是一个对象
this.setState（{text:JSON.stringify（totalsOrders）}）；
})
}
渲染=（）=>{
返回(
{this.state.text}
//这里我想打印这些值。
)
}
}
导出默认RestGps

为什么要使用状态？嗯。最初，您的组件将不会显示任何数据。这是因为获取远程资源需要时间

那么，在加载资源后，如何重新呈现组件以显示文本呢？没有什么！这就是为什么需要使用状态

什么是

componentDidMount

？

componentDidMount

是react生命周期的一个功能部分。当组件最初被渲染时调用它。当它呈现时，您希望获取资源，然后更新我们的状态

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

这很简单，您可以使用

This.state.text

在

render

函数中引用您的状态，然后将其作为文本节点添加到

中。首先，您需要更改一些内容

您的

totalOrders