Блог

Вот мой код для извлечения моих данных 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'
  }
})
  

Следуя документу, я вижу, что 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