我想在本机反应中渲染一个特定的静态对象答案

【问题标题】：I want to render a specific static object in react native我想在本机反应中渲染一个特定的静态对象
【发布时间】：2022-11-01 11:37:41
【问题描述】：

在我通过 axios API 的 http 请求获取它之后，我尝试在 react native 中渲染组件（静态对象）中的特定对象。（节点）服务器工作正常，但每当我尝试在屏幕上渲染它时，什么都没有显示。

此外，当我 console.log 对象它是正确的（在客户端也是）但在模拟器屏幕上仍然没有。

我不知道我是否做错了什么，或者我需要钩子（我是反应原生的新手，所以如果我再次打开相同的问题，请原谅）。

代码如下：

客户

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

});

服务器

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

【问题讨论】：

标签： react-native

【解决方案1】：

最好使用钩子

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

});

【讨论】：

【解决方案2】：

可能您需要了解更多信息：useState 和 useEffect

我将您的代码更改为：

客户

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);
        setRes(response.data);
      })
  }, [])

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

【讨论】：