Реагировать на собственную функцию ReferenceError - PullRequest
Новая
       14

Реагировать на собственную функцию ReferenceError

0 голосов
/ 13 марта 2019

Новое в React Native здесь ... Я пытаюсь вызвать функцию, которая выполняет запрос get внутри компонента, который находится в методе render (). 

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

export default class Home extends React.Component {
  static navigationOptions = {
    title: 'Details',
  };

  getMoviesFromApiAsync = () => {
    return fetch('https://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
      return responseJson.movies;
    })
    .catch((error) => {
      console.error(error);
    });
  };

  render() {

    return (
      <React.Fragment>
        <Text>{getMoviesFromApiAsync()}</Text>
      </React.Fragment>
    );
  }
}

Однако я получаю ReferenceError: Не могу найти переменную getMoviesFromApiAsync (). Почему это?

Изображение ошибки

1 Ответ

1 голос
/ 13 марта 2019

Вам нужно вызвать метод в вашем классе, это базовая вещь Vanilla Javascript. 

<Text>{this.getMoviesFromApiAsync()}</Text>

Однако ваш подход здесь не очень хорош, вы должны выписать компонент, чтобы сохранить результаты вашего запроса API в состоянии компонента. таким образом вам не нужно делать запрос каждый цикл рендеринга! 

export default class Home extends React.Component {
  static navigationOptions = {
    title: 'Details',
  };

  state = {
    movies: []
  }

  componentDidMount() {
    this.getMoviesFromApiAsync()
  }

  getMoviesFromApiAsync = () => {
    return fetch('https://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        movies: [...this.state.movies, ...responseJson.movies]
      })
    })
    .catch((error) => {
      console.error(error);
    });
  };

  render() {
    const { movies } = this.state
    return (
      <React.Fragment>
        { movies.map( (movie, i) => <Text>{movie.title}</Text> ) }
      </React.Fragment>
    );
  }
}
...