ReactJS значения Const на div

Question

Я новичок в реакции и имею простое приложение как это:

Моя цель для этого приложения - потреблять Служба REST Spring Boot и распечатайте данные 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
}

¿Может кто-нибудь сказать, как мне распечатать это totalsOrders в моем html как текст "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 требуется время для извлечения удаленных ресурсов.

Итак, что скажет реакция на повторную визуализацию вашего компонента, чтобы показать текст после загрузки ресурса?Ничего такого!Вот почему вам нужно использовать состояния.

Что такое componentDidMount?

componentDidMount является функциональной частью жизненного цикла реакции.Он вызывается, когда компонент изначально отображается.Когда он рендерится, вы хотите получить ресурс, а затем обновить наше состояние.

Как передать строку в элемент абзаца?

Это просто, вы можете просто сослаться на ваше состояние вrender, используя this.state.text, затем добавьте его как текстовый узел в <p>

Answer 2

Вы можете использовать методы жизненного цикла.

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