I want to render a specific static object in react native-CodePudding

I try to render a specific object inside a component (static object) in react native,after i get it with http request from axios API .The (node)server works fine but whenever i try to render it on the screen nothing shows.

Also when i console.log the object its correct(on client side too) but still nothing on simulator screen.

I dont know if i do something wrong or i need hooks for that(im new in react native so excuse me if i open again some same question) .

The code is below :

Client

import React, { Component,
useEffect,
useState } from 'react';

import { 
StyleSheet, 
Text, 
View ,
} from 'react-native';

import axios from 'axios';

var res;

export default function App() {

   axios.get('http://x.x.x.x:x/rec')
  .then
   (function (response){
    console.log(response.data);
    res = response.data;
  })

  return (
  
    <View  style = {styles.container}>
        <Text>This car is a : {res}</Text>
    </View>

  
  )};
  
const styles = StyleSheet.create({
  container: {
    flex: 1 ,
    marginTop:100,
  },

});

Server

const app = require('express')();
const { json } = require('body-parser');

const car = {
    type: "Fiat",
    model : "500"
  };

const myCar = JSON.stringify(car);



app.get("/rec",(req,res) => {
   res.send(myCar);
   console.log("Took Car");
})

app.get("/",(req,res) => {
  res.set('Content-Type', 'text/plain');
  res.send("You have done it ");
  console.log("Took /");
})



var listener = app.listen(8888,()=>{
  console.log(listener.address().port);
});

CodePudding user response：

May be you need read more about: useState and useEffect

And I change your code to:

Client

import React, { Component, useEffect, useState } from 'react';

import { StyleSheet, Text, View } from 'react-native';

import axios from 'axios';
    
export default function App() {
  const [res, setRes] = useState(""); // suppose response.data is string

  useEffect(() => {
    axios.get('http://x.x.x.x:x/rec')
      .then(function (response){
        console.log(response.data);
        res = response.data;
      })
  }, [])

  return (
    <View  style = {styles.container}>
      <Text>This car is a : {res}</Text>
    </View>
  )
};
  
const styles = StyleSheet.create({
  container: {
    flex: 1 ,
    marginTop:100,
  },
});

CodePudding user response：

Better to use hook for it

import React, { Component, useEffect, useState } from 'react';

import { StyleSheet, Text, View } from 'react-native';

import axios from 'axios';

export default function App() {
   const [label, setLabel] = useState('')
   
   axios.get('http://x.x.x.x:x/rec')
   .then((response) => {
     setLabel(`This car is a : ${response.data}`)
   })

  return (
    <View  style = {styles.container}>
        <Text>{label}</Text>
    </View>
  )};
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:100,
  },

});