#javascript #react-native
#javascript #react-native
Вопрос:
Вот мой код для извлечения моих данных JSON из моего API. Что я пытаюсь сделать, так это напечатать названия различных лекарств в моем Flatlist, а затем сделать этот объект интерактивным, чтобы я мог отобразить дополнительную информацию о нем на следующей странице. Я могу правильно получать данные JSON, но моя проблема связана с их отображением. Мое первое предупреждение отображает то, что у меня есть в моем массиве лекарств (два лекарства), но когда я пытаюсь отобразить эти имена, я получаю «undefined», но там явно есть поле под названием «name», которое связано с данными.
Мой flatlist не выдает никаких ошибок, он просто ничего не отображает. Я не уверен, что еще попробовать на этом этапе.
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'
}
})
Ответ №1:
Следуя документу, я вижу, что 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
Комментарии:
1. О, это было довольно просто. Я всегда упускаю из виду простые вещи.