我想从REST API中获取某个值,并在React native中的文本框中显示。到目前为止,我还没有将其获取到文本框中,其次,它返回此错误
我的源代码是这样的
import { Button, Image, ImageBackground, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'
import React, { useEffect, useState } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { Icon } from '@rneui/base'
const VirtualAccount = () => {
const [virtualAcc, setvirtualAcc] = useState();
const [account_number, setAccount_number] = useState("");
const [bank_name, setBank_name] = useState("");
sayAlert = () =>{
alert('Text copy button is active');
}
getVirtualAccount = async () => {
let token = await AsyncStorage.getItem('token');
let email = await AsyncStorage.getItem('email');
fetch(
'https://webserver-migospay.onrender.com/api/user-serv/get-virtual-account/'+email,
{
method: 'GET',
headers: {
'Content-type': 'application/json',
Authorization: `Bearer ${token}`,
},
},
)
.then(response => response.json())
.then(responseJson => {
setvirtualAcc(responseJson);
});
};
useEffect(() => {
//showdata();
getVirtualAccount();
});
return (
<View style={{top:30}}>
<ImageBackground
source={{
uri: 'asset:/logo/bg.JPG',
}}
imageStyle={{borderRadius: 6}}
style={{
top:15,
paddingTop:95,
alignSelf:'center',
width: 328,
height: 145,
borderadius: 9,
justifyContent: 'center',
alignSelf:'center',
alignItems: 'center'
}}>
<View>
<Text style={styles.accText}>Wallet Balance</Text>
<Text style={styles.text}> 250,000 </Text>
</View>
</ImageBackground>
<View>
<Text
style={{
fontFamily: 'Poppins-Bold',
flexDirection: 'row',
paddingTop:55,
fontSize: 15,
left: 25,
color: 'gray',
}}>
Your Virtual Account
</Text>
<View>
<View style={{flexDirection:'row', alignSelf:'center',justifyContent:'center'}}>
<TextInput
placeholder=" Bank Name"
onChangeText={text => setBank_name(text)}
value={virtualAcc.bank_name}
style={styles.input}
/>
<TouchableOpacity onPress={()=>sayAlert()}>
<Image source={{uri:'asset:/logo/copy-image2.png'}} style={{height:30,width:30,left:-40, top:20}}/>
</TouchableOpacity>
</View>
<View style={{flexDirection:'row',alignSelf:'center',justifyContent:'center'}}>
<TextInput
placeholder=" Account Number"
onChangeText={text => setAccount_number(text)}
value={virtualAcc.account_number}
style={styles.input}
/>
<TouchableOpacity onPress={()=>sayAlert()}>
<Image source={{uri:'asset:/logo/copy-image2.png'}} style={{height:30,alignSelf:'center',width:30,left:-40, top:20}}/>
</TouchableOpacity>
</View>
</View>
</View>
</View>
)
}
export default VirtualAccount
const styles = StyleSheet.create({
shadowProp:{
shadowOffset: {width: -2, height: 4},
shadowColor: '#171717',
shadowOpacity: 0.2,
shadowRadius: 3,
},
container: {
flex: 1,
justifyContent: 'center',
padding: 20,
},
date_ofTransaction: {
marginTop: 20,
alignItems:'flex-start',
alignItems:'center',
left: -75,
fontFamily: 'Poppins-Light',
fontSize:9
},
paragraph: {
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
padding: 20,
},
text: {
top: -85,
fontSize: 30,
color: 'white',
textAlign: 'center',
fontFamily: 'Poppins-Bold',
},
mainContainer: {
paddingTop: 90,
justifyContent: 'center',
alignItems: 'center',
},
accText: {
top: -85,
paddingTop: 10,
justifyContent: 'center',
alignItems: 'center',
fontFamily: 'Poppins-Medium',
color: 'white',
textAlign: 'center',
},
PayeeName: {
justifyContent: 'flex-start',
alignItems:'center',
left: 23,
fontFamily: 'Poppins-Medium',
size: 800,
fontWeight:'bold'
},
amountValue: {
alignSelf:'flex-end',
top : -30,
right: -25,
fontFamily: 'Poppins-Medium',
size: 800,
fontWeight:'bold'
},
input:{
width:300,
height:55,
margin:10,
fontFamily : 'Poppins-Medium',
fontSize : 15,
borderBottomColor:'#00BB23',
borderBottomWidth: 1,
marginBottom: 30
},
})
我在网上查遍了,还是找不到有价值的东西。或者我到底该怎么做?是不是我遗漏了什么东西?
编辑
请查看它从JSon返回的数据
[
{
"_id": "63a21a3d3b6777ba42d0f0db",
"email": "john_kross2@yopmail.com",
"account_number": "0123456789",
"bank_name": "WEMA BANK",
"created_at": "2022-12-20T20:05:19.491Z",
"__v": 0
}
]
2条答案
按热度按时间06odsfpq1#
你得到了一个数组作为响应,这就是为什么你得到了一个错误,试试这个代码
yruzcnhs2#
==〉只需将这一行添加到
fetch
函数中。==〉更新文本输入代码。