在函数中反应本机网络意外令牌

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 行的字符 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 - ) 所以首先在状态电影中设置变量 null 因为你没有任何电影数据

2 - ) 在渲染后读取 React Component Lifecycle ComponentDidMount 运行并调用 getMovies func 获取数据并写入 this.setState

状态

3 - ) 检查你是否有电影 if(!movies) return null;或 return 用于加载的 ActivityIndicator，但如果您永远无法获得电影 activity 指示器运行。

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

在函数中反应本机网络意外令牌

React Native Networking Unexpected Token in Function

android

token

reactjs

react-native

unexpected-token