Как отделить вызов ax ios от компонента в реагировать на родной? - PullRequest
Новая
       10

Как отделить вызов ax ios от компонента в реагировать на родной?

1 голос
/ 24 февраля 2020

Я новичок, чтобы реагировать на родных. У меня есть следующий компонент в моем проекте, пока я написал для получения API в том же компоненте, но хочу выделить его. У меня возникают трудности с тем, как получить доступ к переменной, которую я использую в методе "getAlbum", снаружи компонента.

Существует ли стандартный способ отделения вызова API от компонента? 

import React, { Component } from 'react';
import {
  FlatList, Text, View, Image, TouchableOpacity,
} from 'react-native';
import { ActivityIndicator, Provider } from 'react-native-paper';
import axios from 'axios';
import styles from '../style/ThumbnailView.component.style';
import ErrorAlert from '../common/ErrorAlert';
import * as myConstant from '../common/Constants';

export default class HomeScreen extends Component {

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

  constructor(props) {
    super(props);

    this.state = {
      isLoading: true,
      apiLoadingError: false,
    };
  }

  getAlbums() {
    const { navigation } = this.props;
    const albumId = navigation.getParam('albumID', 'no data');
    axios
      .get(
        myConstant.API + `photos?albumId=${albumId}`, {timeout: myConstant.TIMEOUT} 
      )
      .then((response) => {
          this.setState({
            isLoading: false,
            dataSource: response.data,
          });
      })
      .catch(err => {
        this.setState({isLoading: false, apiLoadingError: true})
      }); 
  }

  componentDidMount() {
    this.getAlbums();
  }

  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 (
      <React.Fragment>
        <Provider>
          <View style={styles.listContainer} >

            <FlatList
                testID='flatlist'
                data={ this.state.dataSource } numColumns={3}
                renderItem={({ item }) => <View style={styles.listRowContainer}>
                    <TouchableOpacity onPress={() => this.props.navigation.navigate('AlbumDetailsViewScreen', {
                  albumTitle: item.title, albumImg: item.url
                })} style={styles.listRow}>
                    <View style={styles.listTextNavVIew}>
                      <Image source = {{ uri: item.thumbnailUrl }} style={styles.imageViewContainer} />
                    </View>
                    </TouchableOpacity>
                </View>
              }
                keyExtractor = { (item, index) => index.toString() }
            />

          </View>
        </Provider>
      </React.Fragment>
    );
  }
}

1 Ответ

0 голосов
/ 27 февраля 2020

Вы можете отделить ваш вызов ax ios, создав другой класс с функцией, которая получит 'albumID' в качестве аргумента, а затем добавьте его к вашей ссылке ios. Если вы хотите вызвать эту функцию из другого класса, просто сделайте ее stati c и используйте, как в примере ниже. Затем вы можете отобразить свои fetchData, чтобы проанализировать их в состояние. Надеюсь, это поможет вам. 

export class Api {
    static fetchData = (albumId: string) => {
        //here your axios call which will return an array
    }
}

export default class HomeScreen extends React.Component {
    state = {
        //.....
    }

    receivedData = Api.fetchData('albumID');
    //you can map array here to get what you want.
}
...