我有一个后端API,该后端API调用时,返回JSON,并将数据(甚至5条记录,每条最多2列)存储到React Native APP内部的状态变量中,该状态变量需要在APP屏幕上呈现。但是不知何故,它不是在模拟器中没有单击即可进行渲染,否则要花费10秒钟以上的时间来渲染。
NodeJS-API
app.post('/getInvoicesWithoutToken', function (req, res) {
var obj = req.body;
let response = {};
console.log("/getInvoicesWithoutToken"+new Date());
let sql = "select * from invoices order by invoiceDate desc";
console.log(sql);
db.query(sql, function (err, row) {
if(row) {
response.code = "S";
response.alert = "OFF";
response.alertMessage = "SUCCESS";
response.data = row;
res.json(response);
}
else {
response.code = "E";
response.alert = "ON";
response.alertMessage = "Error - Unable to find your invoices. Please try again";
response.data = "";
res.json(response);
}
});
});
React Native-backend.js
export const getInvoicesWithoutToken = (obj) => {
const URL = customData.apiURL+"/getInvoicesWithoutToken";
return fetch(URL, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(obj),
})
.then((res) => res.json())
.catch((error) => {
console.error(error);
});
}
React Native-屏幕代码
_getInvoicesWithoutToken = async () => {
const obj = {};
getInvoicesWithoutToken(obj)
.then(response => {
if(response.code === "S") {
this.setState({
showSpinner: false,
allInvoices : response.data
});
}
})
}
render() {
let dataReceived = [];
dataReceived = this.state.allInvoices;
let spinner = <Text></Text>;
if(this.state.showSpinner)
{
spinner = <View style={{alignItems: 'center',justifyContent: 'center'}}><Spinner color='blue' /><Text>Searching for invoices...</Text></View>
}
return (
<Container style={styles.container}>
<Content>
{spinner}
<View>
{
dataReceived.map((item, i) => {
return (
<View key={i} style={{padding:10,}}>
<Text style={styles.title}>
{item.customerName}
</Text>
<Text style={styles.subTitle}>
{item.invoiceDate}
</Text>
</View>
)
})
}
</View>
</Content>
</Container>
);
}