javascript - responseJson 未定义
问题描述
这是我从 API 获取 JSON 数据的代码。我要做的是在我的 Flatlist 中打印各种药物的名称,然后使该对象可点击,以便我可以在下一页上显示有关它的更多信息。我可以正确接收 JSON 数据,但我的问题在于显示它。我的第一个警报显示了我的药物数组中的内容(两种药物),但是当我尝试显示这些名称时,我得到“未定义”,但显然有一个名为“名称”的字段与数据相关联。
我的平面列表没有抛出任何错误,它只是不显示任何内容。我不确定此时还可以尝试什么。
import React from 'react'
import {
View,
Text,
Button,
StyleSheet,
FlatList,
ActivityIndicator,
AsyncStorage
} from 'react-native'
import Swipeout from 'react-native-swipeout';
import { goToAuth } from '../../helpers/Navigation'
import { Navigation } from 'react-native-navigation';
import { USER_KEY, USERID_KEY, USERNAME, PASSWORD, API_URL } from '../../helpers/Config'
import { refreshToken } from '../../helpers/Helper'
export default class Medication extends React.Component {
constructor(props) {
super(props);
this.state = { isLoading: true, dataSource: [] }
this.getMedications();
}
static get options() {
return {
topBar: {
title: {
text: 'Medication'
},
}
};
}
componentDidMount() {
}
getMedications = async () => {
// used to assign the medication to the specific individual
const userID = await AsyncStorage.getItem(USERID_KEY);
// used to access the protected links
const userToken = await AsyncStorage.getItem(USER_KEY);
fetch(API_URL + '/medications/all/' + userID, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'x-access-token': userToken
},
})
.then((response) => response.json())
.then((responseJson) => {
alert(responseJson.status);
alert(responseJson.message);
// displays all medication data
alert(JSON.stringify(responseJson.data.medications));
// should display the names, displays undefined
alert(JSON.stringify(responseJson.data.medications.name));
this.setState({
isLoading: false,
dataSource: responseJson,
});
})
.catch((error) => {
console.error(error);
});
}
logout = async () => {
try {
await AsyncStorage.removeItem(USER_KEY)
goToAuth()
} catch (err) {
console.log('error signing out...: ', err)
}
}
render() {
if (this.state.isLoading) {
return (
<View style={{ flex: 1, padding: 20 }}>
<ActivityIndicator />
</View>
)
}
return (
<View style={styles.container}>
<FlatList>
data={this.state.dataSource}
renderItem={({ item }) => <Text>{item.data.medications.name}</Text>}
keyExtractor={(item, index) => index}
</FlatList>
<Button
onPress={this.logout}
title="Sign Out"
/>
<Button
onPress={() => {
Navigation.push(this.props.componentId, {
component: {
name: 'MedicationDetailScreen',
}
});
}}
title="View Medication Detail Screen"
/>
<Button
onPress={() => {
Navigation.push(this.props.componentId, {
component: {
name: 'AddMedicationScreen',
}
});
}}
title="View Add Medication Screen"
/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
})
解决方案
按照我看到的属性是一个数组的文档。data
你应该setState
喜欢dataSource
这个
this.setState({
isLoading: false,
dataSource: responseJson.data.medications,
});
并且因为responseJson.data.medications
是一个数组,所以你不能得到name
一个项目的属性。您必须确定要name
首先获得的项目。一定是
alert(JSON.stringify(responseJson.data.medications[0].name)) // For example the first item
推荐阅读
- php - Apache + PHP中的“标题前脚本输出结束”
- bash - 一段时间后停止命令执行并在 shell 脚本中执行下一个命令
- python - 为什么我的按钮没有返回 - Message Box Python
- spring - Spring boot:日志文件已获取对静态文件的请求
- google-sheets - 用时间查询公式 Google 表格
- docker - 在 docker 容器中安装 aurelia 项目的 Npm 在 jenkins 构建服务器上卡住/挂起
- wordpress - 循环显示帖子被查看的次数
- python - OSX:pyInstaller 下载失败
- java - OutOfMemoryError 与 apache commons Base64 静态方法 decodeBase64
- android - PowerMockito Environment.getExternalStoragePublicDirectory() 返回 null