javascript - React Native 中的第一个数据中来自 API responseJson 的未定义数据
问题描述
我有 1 个错误,即当我在 onTask () 函数中提交数据时,当我显示 this.state.dataApp.app_uid 数据时,该数据仅在 console.log() 中出现未定义,但是当我再次提交时 app_uid 出现。
不明确的
{app_uid:“3377091705d955e40b15aa5020171059”,app_number:40793}
然后我再次提交数据后,控制台变成这样:
不明确的
{app_uid:“3377091705d955e40b15aa5020171059”,app_number:40793}
3377091705d955e40b15aa5020171059
{app_uid:“284719740129051982591809ad291045”,app_number:40794}
即使我只想像上面那样获取 app_uid 数据:337709 ....
也许有人可以纠正我的脚本中的错误?以下脚本:
import React, {Component} from 'react';
import { Text, View, StyleSheet, SafeAreaView, Image, TouchableOpacity,ScrollView, ActivityIndicator , FlatList} from 'react-native';
import { createBottomTabNavigator, createAppContainer} from 'react-navigation';
import IconHome from '../components/IconHome';
import {Actions} from 'react-native-router-flux';
import IconLaporan from '../components/IconLaporan';
import IconNews from '../components/IconNews';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import {Fonts} from '../utils/Fonts';
import Wallpaper2 from'../components/Wallpaper2';
export default class NewCases extends Component {
constructor(props){
super(props)
this.state ={
tokens : this.props.Tokennya,
user : this.props.userName,
tokennya : [],
alluser : [],
user_role : [],
ussr_role : "",
error : "",
allcases : [],
dataApp : [],
dataSess : [],
isLoading : true,
}
}
componentDidMount() {
fetch('https://bpm.asihputera.or.id/api/1.0/asihputera/extrarest/login-user', {
method: 'GET',
headers: {
'Content-Type' : 'application/json',
'Accept-Encoding' : 'gzip, deflate',
'Authorization' : 'Bearer '+ this.state.tokens,
},
}).then((response) => response.json())
.then((responseJson) => {
console.log(responseJson);
this.setState({
alluser: responseJson,
});
this.getUserRole(this.state.alluser.uid);
});
fetch('https://bpm.asihputera.or.id/api/1.0/asihputera/case/start-cases', {
method: 'GET',
headers: {
'Content-Type' : 'application/json',
'Accept-Encoding' : 'gzip, deflate',
'Authorization' : 'Bearer '+ this.state.tokens,
},
}).then((response) => response.json())
.then((responseJson) => {
console.log(responseJson);
this.setState({
allcases: responseJson,
isLoading: false
});
});
}
onTask = (pro,tas) => {
fetch('https://bpm.asihputera.or.id/api/1.0/asihputera/cases/', {
method: 'POST',
headers: {
'Content-Type' : 'application/json',
'Accept-Encoding' : 'gzip, deflate',
'Authorization' : 'Bearer '+ this.state.tokens,
},
body: JSON.stringify({
'pro_uid' : pro,
'tas_uid' : tas,
}),
})
.then((response) => response.json())
.then((responseJson) => {
console.log(responseJson);
this.setState({
dataApp: responseJson,
});
});
console.log(this.state.dataApp.app_uid);
}
renderItem = ({item}) => {
return(
<View style={{flex: 1}}>
<TouchableOpacity onPress={this.onTask.bind(this, item.pro_uid, item.tas_uid)}>
<Text style={styles.textList}>
{item.pro_title}
</Text>
</TouchableOpacity>
</View>
)
}
render2 = ({item}) => {
return(
<View>
</View>
)
}
renderSeparator = () => {
return (
<View
style={{height: 1, width: '100%', backgroundColor:'black'}}>
</View>
)
}
getUserRole = (userID) => {
fetch('https://bpm.asihputera.or.id/api/1.0/asihputera/user/' + userID, {
method: 'GET',
headers: {
'Content-Type' : 'application/json',
'Accept-Encoding' : 'gzip, deflate',
'Authorization' : 'Bearer '+ this.state.tokens,
},
}).then((response) => response.json())
.then((responseJson) => {
this.setState({
user_role: responseJson
});
if(this.state.user_role.usr_role == 'PROCESSMAKER_ADMIN')
this.setState({
ussr_role: 'Administrator'
})
else if(this.state.user_role.usr_role == 'PROCESSMAKER_OPERATOR')
this.setState({
ussr_role: 'Operator'
})
else if(this.state.user_role.usr_role == 'PROCESSMAKER_MANAGER')
this.setState({
ussr_role: 'Manager'
})
})
}
render() {
return (
this.state.isLoading
?
<View style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
<ActivityIndicator size="large" color="#330066" animating />
</View>
:
<Wallpaper2>
<View style={styles.shape2}>
<Text style={styles.asihPutera}> ASIH PUTERA </Text>
<Text style={styles.usernamenya}>{this.state.alluser.username}</Text>
<Text style={styles.logIn}>{this.state.ussr_role}</Text>
<Image style={styles.iconLogin} source={require('../images/Person.png')}/>
</View>
<Text style={styles.cases}> -PROCESS LIST- </Text>
<View style={styles.garis} />
<FlatList
data={this.state.allcases}
renderItem={this.renderItem}
keyExtractor={(item, index) => index.toString()}
ItemSeparatorComponent={this.renderSeparator}
/>
<View style={styles.garis} />
</Wallpaper2>
);
}
}
const styles = StyleSheet.create({
container:{
flex:1,
alignItems: 'center',
justifyContent: 'center'
},
home: {
width: 50,
height: 50,
},
laporan: {
width: 50,
height: 50,
},
setting: {
width: 133,
height: 45,
color: '#015c6f',
fontFamily: Fonts.Lato2,
fontSize: 18,
fontWeight: '700',
lineHeight: 43.2,
marginLeft: 145
},
shape2: {
width: 723,
height: 40,
backgroundColor: '#00ffc6',
flexDirection: 'row',
},
asihPutera: {
marginTop: 5,
marginLeft:10,
color: '#015c6f',
fontFamily: Fonts.Lato,
fontSize: 20,
fontWeight: 'bold',
fontStyle: 'italic',
},
logIn: {
color: '#0d535d',
fontSize: 8,
marginLeft: -55,
fontFamily: Fonts.Lato3,
marginTop: 25,
},
usernamenya: {
color: '#0d535d',
fontSize: 15,
marginLeft: 105,
fontFamily: Fonts.Lato3,
},
iconLogin: {
marginTop:-5,
width: 50,
height: 50,
},
madrasah: {
color: '#015c6f',
fontFamily: Fonts.Lato4,
fontSize: 30,
textAlign: 'center',
marginTop: 10,
},
shape3: {
width: 723,
height: 50,
marginTop:30,
backgroundColor: '#00ffc6',
flexDirection: 'row',
},
shape4: {
marginTop: 15,
width: 290,
height: 120,
borderRadius: 10,
borderColor: '#707070',
borderStyle: 'solid',
borderWidth: 1,
backgroundColor: '#015c6f',
//marginLeft: 35,
alignSelf: 'center'
},
daycare: {
color: '#feffff',
fontFamily: Fonts.Lato3,
fontSize: 18,
textAlign: 'center',
marginTop: 30,
},
aliyah: {
color: '#feffff',
fontFamily: Fonts.Lato3,
fontSize: 18,
textAlign: 'center',
marginTop: 20,
},
newcase: {
width : 100,
height: 100,
marginTop: 45,
marginLeft: 40,
},
garis:{
width: 360,
height: 2,
backgroundColor: 'gray',
marginVertical: 1
},
inbox: {
width : 100,
height: 100,
marginTop: 45,
marginLeft: 80,
},
keuangan: {
width : 100,
height: 100,
marginTop: 90,
marginLeft: 40,
},
akademik: {
width : 100,
height: 100,
marginTop: 90,
marginLeft: 80,
},
cases: {
color: '#015c6f',
fontFamily: Fonts.Lato,
fontSize: 40,
marginTop: 30,
fontStyle: 'italic',
fontWeight: 'bold',
alignSelf: 'center',
},
bgdraftnya: {
backgroundColor: '#cfe6f4',
},
bglist: {
backgroundColor: '#FFFFFF',
fontSize: 20
},
garis:{
width: 360,
height: 2,
backgroundColor: 'gray',
marginVertical: 2
},
garis2:{
width: 360,
height: 4,
backgroundColor: 'gray',
},
textasih:{
marginVertical:20,
marginHorizontal: 90,
fontFamily: Fonts.LexendExa,
fontSize: 20
},
buttonText: {
fontSize : 16,
fontWeight : '500',
color: '#FFFFFF',
textAlign:'center'
},
textwelcome:{
marginHorizontal: 15,
fontFamily: Fonts.LexendExa,
fontSize: 15,
},
bgheader:{
backgroundColor: '#99CCFF'
},
textList:{
paddingVertical: 15,
paddingHorizontal: 8,
fontSize: 14
}
});
希望有人可以帮我解决这个问题..
解决方案
我不确定,但这可能是由于 setState 的异步性质
{fetch().then((response) => response.json()).then((responseJson) => {
this.setState({
dataApp: responseJson,
});
});
console.log(this.state.dataApp.app_uid);
}
由于您是在内部访问this.state.dataApp.app_uid
之后,它可能会更新。setState
then block
要获取数据,您需要在 setState 回调中进行控制台,如下所示
{
.then(()=>{
this.setState({
dataApp: responseJson,
},()=>{console.log(this.state.dataApp.app_uid)})//now you should be seeing the data
})
}
推荐阅读
- esp32 - ESP32 从固件 .bin 文件中检索嵌入的二进制文件
- java - Java - 数组中元素的增量
- mysql - Mysql select ok,更新不适用于相同的查询
- xcode - Mac M1 上的 Flutter 项目:找不到模块
- python - 无法启动代理代理
- android - 使用属性 lambda 或在 Kotlin/Android 中为侦听器/回调设置属性 lambda 的函数更好吗
- c# - .NET 5 Core Entity Framework Controller w/OData Return Child Object with a Child Object
- sql - 如何在 BigQuery 中取消透视结构?
- c++ - C++ 入门(第 5 版);第 19 章 - 算法:std::lower_bound
- visual-studio-code - 如何让 Visual Studio Code 自动滚动调试控制台?