在我使用來自 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);
});
uj5u.com熱心網友回復：
最好使用鉤子
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) => {
const data = response.data
const resultLabel = typeof data === 'string' ? data :
`${data.type} ${data.model}`
setLabel(`This car is a : ${resultLabel}`)
})
return (
<View style = {styles.container}>
<Text>{label}</Text>
</View>
)};
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop:100,
},
});
uj5u.com熱心網友回復：
可能您需要閱讀更多資訊：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,
},
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/525059.html
標籤：反应式