android - 函数中的 React Native Networking Unexpected Token

Question

我目前正在尝试学习 React Native，但我已经在教程的网络部分遇到了困难。

这是代码：

import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';

class App extends Component {
    function 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() {
        getMoviesFromApiAsync();
    };
}

AppRegistry.registerComponent('testproject', () => App);

我收到以下错误：

在我的情况下，第 5 行，Char 10 将是：function所以它期望在funct.

Answer 1

这是使用该功能的示例：

import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';

class App extends Component {
  constructor(props) {
    super(props);
    this.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: responseJson.movies });
            })
            .catch((error) => {
                console.error(error);
            });
    }
    renderMovies = () => 
       this.state.movies.map((movie, i) => <Text key={i}>{movie.title}</Text>)

    render() {
      return (
        <View style={{flex: 1}}>
          {this.renderMovies()}
        </View>
      )
    };
}

AppRegistry.registerComponent('testproject', () => App);

Answer 2

 import React, { Component } from 'react';
    import { AppRegistry, Text, TextInput, View } from 'react-native';

    class App extends Component {
       state = {
        movies: null
       }
       componentDidMount() {
         const movies = this.getMoviesFromApiAsync();
         this.setState({movies: movies});
       }
       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() {
            const { movies } = this.state;
            if (!movies) return null;
            return (
    <View>
              {
               movies.map((movie, index) => {
                console.log("movie:", movie);
                return(
                 <View key={index}>
                  <Text>{movie.name}</Text>
                 </View>
                )
               })
              }
    </View>
            )
        };
    }

    AppRegistry.registerComponent('testproject', () => App);

1 - ) 所以首先在状态电影中设置变量为空，因为你没有任何电影数据

2 - ) 读取 React 组件生命周期 ComponentDidMount 在渲染后运行并调用 getMovies 函数以获取数据并使用 this.setState 写入状态

3 - ) 检查你有没有 if(!movies) return null 的电影；或返回 ActivityIndi​​cator 进行加载，但如果你没有让电影活动指示器永远运行。

4 - ) this.setState 用新的状态再次渲染你的组件