Как вызвать функцию из другого файла в реагировать на родной?

Question

У меня есть API. js, где я пишу логи c вызова службы и дома. js, где я хочу показать данные, получаемые из API. Но я испытываю трудности с тем, как вызвать функцию в домашних условиях. js и получить данные из API. js class.

API. js

import axios from 'axios';
import * as myConstant from '../common/Constants';

export default async function fetchInfo() {
    axios
      .get(myConstant.API + 'albums', {timeout: myConstant.TIMEOUT} )
      .then((response) => {
        const items = response.data.items;
        return items;
      })
      .catch(err => {
        this.setState({isLoading: false, apiLoadingError: true})
      }); 
  }

home. js

import React, { Component } from 'react';
import { ActivityIndicator } from 'react-native-paper';
import {
   Text, View, TouchableOpacity, FlatList
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import axios from 'axios';
import styles from '../style/Home.component.style';
import ErrorAlert from '../common/ErrorAlert';
import * as myConstant from '../common/Constants';
import fetchInfo from '../component/API';


export default class HomeScreen extends Component {

    // For to Navigation header
    static navigationOptions = () => ({
      headerTitle: 'Album List',
    });

    constructor(props) {
      super(props);

      this.state = {
        isLoading: true,
        apiLoadingError: false,
        items: []

      };
    }

  
    async componentDidMount() {
      **await fetchInfo().then((items) => this.setState({ items }));** NOT working for me ... how to get data here

    }

    FlatListItemSeparator = () => (
        <View style={styles.flatListItemSeparator} />
    )

    render() {
      if (this.state.isLoading) {
        return (
          <View style={{ flex: 1, paddingTop: 30 }}>
              <ActivityIndicator animating={true} size='large' />
          </View>
        );
      }

      if (this.state.apiLoadingError) {
        return (
          <ErrorAlert />
        );
      }

      return (

        
        <View style={styles.MainContainer} >
          
          <FlatList
              data={ this.state.items  } 
              testID='AlbumList'
              ItemSeparatorComponent = {this.FlatListItemSeparator}
              renderItem={({ item }) => <View style={styles.listRowContainer}>

                  <TouchableOpacity onPress={() => this.props.navigation.navigate('ThumbnailViewScreen', {
                    albumID: item.id,
                  })} style={styles.listRow}>
                  <View style={styles.listTextNavVIew}>
                    <Text style={styles.albumTitle}> {console.log(fetchInfo().then((items) => this.setState({ items })))} </Text>
                    <Ionicons name='md-arrow-dropright' style={styles.detailArrow} />
                  </View>
                  </TouchableOpacity>

              </View>
            }
              keyExtractor = { (item, index) => index.toString() }
          />
        </View>
      );
    }
}

Answer 1

Я думаю, проблема в том, что вы не возвращаете обещание в fetchInfo, поэтому вы не можете получить данные при выполнении .then

import axios from 'axios';
import * as myConstant from '../common/Constants';

export default async function fetchInfo() {
    return axios // IMPORTANT THE RETURN HERE
      .get(myConstant.API + 'albums', {timeout: myConstant.TIMEOUT} )
      .then((response) => {
        const items = response.data.items;
        return items;
      })
      .catch(err => {
        this.setState({isLoading: false, apiLoadingError: true})
      }); 
  }

Answer 2

Вы можете экспортировать и вызывать функцию в React Native следующим образом:

api. js

const FetchInfo = {
  fetchInfos: async function() {
    //your function code
  }
}

export default FetchInfo;

home. js

import FetchInfo from '../component/API';

//you call the function like this

FetchInfo.fetchInfos()