React Native 函数引用错误

Question

这里是 React Native 的新手...我正在尝试调用一个函数，该函数在 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()。这是为什么？

Error Image

Answer 1

您需要在 class 上调用该方法，这是基本的 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>
    );
  }
}

React Native 函数引用错误

React Native Function ReferenceError

reactjs

function

native