blocks|key|2500673|text|您可以使用生命周期方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2500674|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>
++++++++)
++++}
}|code-block|syntax|javascript|2500675|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can make use of life cycle methods.</p>

<pre><code>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) =&gt; {
    const requestBody = response.body();
    const totalsOrders = requestBody.data(); /*Need to print this on the &lt;div&gt;**/
    this.setState({totalsOrders: totalsOrders });
})
    }

    render(){
        const {totalsOrders} = this.state;
        return(
             &lt;div className="container"&gt;
                &lt;p&gt;Hello World&lt;/p&gt;
            totalsOrders.map(item =&gt; {
                {item}
            }); 
            &lt;/div&gt;
        )
    }
}
</code></pre>


blocks|key|2288347|text|首先，你需要改变一些东西。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2288348|2288349|您的totalOrders对象需要在RestGps类的作用域内。|ordered-list-item|offset|length|style|CODE|2288350|您没有使用states，这会导致许多奇怪的行为！|2288351|2288352|我建议做以下几件事：|2288353|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|code-block|syntax|javascript|2288354|为什么要使用状态？|2288355|井。最初，您的组件不会显示任何数据。这是因为get需要时间来获取远程资源。|2288356|那么，什么将告诉react重新呈现组件，以便在加载资源后显示文本？没什么!这就是你需要使用状态的原因。|2288357|什么是componentDidMount|2288358|componentDidMount是react生命周期的一个功能部分。它在组件最初呈现时调用。当它呈现时，您希望获取资源，然后更新我们的状态。|2288359|我们如何将字符串传递给段落元素？|2288360|这很简单，您可以使用this.state.text在render函数中引用您的状态，然后将其作为文本节点添加到<p>中|2288361|entityMap^0|0|0|2|B|I|7|0|5|6|0|0|0|0|0|M|3|0|0|3|H|0|0|H|0|0|A|F|Q|6|1J|3|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|1B|8|@$F|1C|G|1D|H|I]|$F|1E|G|1F|H|I]]|9|@]|A|$]]|$1|J|3|K|5|E|7|1G|8|@$F|1H|G|1I|H|I]]|9|@]|A|$]]|$1|L|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1K|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|1L|8|@]|9|@]|A|$R|S]]|$1|T|3|U|5|6|7|1M|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1N|8|@$F|1O|G|1P|H|I]]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1R|8|@$F|1S|G|1T|H|I]]|9|@]|A|$]]|$1|11|3|12|5|6|7|1U|8|@$F|1V|G|1W|H|I]]|9|@]|A|$]]|$1|13|3|14|5|6|7|1X|8|@]|9|@]|A|$]]|$1|15|3|16|5|6|7|1Y|8|@$F|1Z|G|20|H|I]|$F|21|G|22|H|I]|$F|23|G|24|H|I]]|9|@]|A|$]]|$1|17|3|-4|5|6|7|25|8|@]|9|@]|A|$]]]|18|$]]

<p>First you need to change some things around. </p>

<ol>
<li>Your <code>totalOrders</code> object needs to be within the scope of your <code>RestGps</code> class.</li>
<li>You aren't using <code>states</code>, which can cause a lot of weird behaviour!</li>
</ol>

<p>I suggest doing the following:</p>

<pre><code>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 = () =&gt; {
        totals.get().then((response) =&gt; {
            const requestBody = response.body();
            const totalsOrders = requestBody.data(); // assuming this is object
            this.setState({ text: JSON.stringify(totalsOrders) });
        })
    }

    render = () =&gt; {
        return(
           &lt;div className="container"&gt;
                 &lt;p&gt;{this.state.text}&lt;/p&gt;
                //Here I want to print the values.
            &lt;/div&gt;
        )
    }
}

export default RestGps
</code></pre>

<h2>Why are using states?</h2>

<p>Well. Initially, your component won't have any data to show. This is because <code>get</code> takes time to fetch remote resources.</p>

<p>So what will tell react to re-render your component, to show the text once the resource gets loaded? Nothing! This is why you need to use states.</p>

<h2>What is <code>componentDidMount</code>?</h2>

<p><code>componentDidMount</code> is a function part of the react lifecycle. It is called when the component initially gets rendered. When it renders, you want to fetch the resource, then update our state.</p>

<h2>How do we pass the string into the paragraph element?</h2>

<p>This is simple, you can just reference your state in the <code>render</code> function, using <code>this.state.text</code>, then add it as a text node in <code>&lt;p&gt;</code></p>


<p>I'm new on react and have a simple application as this:</p>

<p><a href="https://i.stack.imgur.com/pCvbU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pCvbU.png" alt="enter image description here"></a></p>

<p>My purpose for this app it's to consume an <strong><em>Spring Boot REST Service</em></strong> and print the data <strong>json</strong> on my react app.</p>

<p>I achieve this following this tutorial: <a href="https://github.com/marmelab/restful.js/tree/master" rel="nofollow noreferrer">https://github.com/marmelab/restful.js/tree/master</a></p>

<p>But now I'm stuck on a simple problem, <em>don't know how to print the values on a html tag</em>, this is an example of my code:</p>

<pre><code>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) =&gt; {
    const requestBody = response.body();
    const totalsOrders = requestBody.data(); /*Need to print this on the &lt;div&gt;**/
})

class RestGps extends React.Component {
    render(){
        return(
            &lt;div className="container"&gt;
                &lt;p&gt;Hello World&lt;/p&gt;
                //Here I want to print the values.
            &lt;/div&gt;
        )
    }
}

export default RestGps
</code></pre>

<p>The <strong><em>const</em></strong> totalsOrders has the values of the request, the request structure it's like this:</p>

<pre><code>{
  "remissionOk": 109,
  "remissionAlert": 5,
  "remissionError": 17,
  "remissionOutOfTime": 82
}
</code></pre>

<p>¿Can someone please tell me how can I print this <strong>totalsOrders</strong> on my html as my text "Hello World"? Regards.</p>


ReactJS values of Const on div

Spring Boot

JSON

我是react的新手，我有一个简单的应用程序，如下所示：​​我使用这个应用程序的目的是使用一个Spring Boot REST Service，并在我的react应用程序上打印数据json。我通过以下教程实现了这一点：但是现在我遇到了一个简单的问题，不知道如何在html标签上打印值，这是我的代码的一个例子：import...

问div上Const的ReactJS值
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问div上Const的ReactJS值EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问div上Const的ReactJS值
EN