2016-11-13 95 views
1

我想创建一个简单的应用程序从facebook演示API检索数据,并显示它们与反应原生。取回反应本机意外令牌

这是我的代码(index.android.js):

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

 
class AwesomeProject extends Component{ 
 

 

 
    constructor(props){ 
 
    super(props); 
 
    this.state = { 
 
     movies: [] 
 
    } 
 

 
    }; 
 

 
    componentWillMount(){ 
 
     this.getMoviesFromApi().then((res) => { 
 
      movies: res.movies; 
 
     }); 
 
    } 
 

 

 

 
    async function getMoviesFromApi() { 
 
    try { 
 
     let response = await fetch('https://facebook.github.io/react-native/movies.json'); 
 
     let responseJson = await response.json(); 
 
     return responseJson.movies; 
 
    } catch(error) { 
 
     console.error(error); 
 
    } 
 
    } 
 

 

 

 
    render() { 
 

 
     return(
 
      <Text> 
 
      {this.state.movies} 
 
      </Text> 
 
     ); 
 

 
    } 
 

 
} 
 
AppRegistry.registerComponent('AwesomeProject',() => AwesomeProject);

但它不断给我这个错误:

Unexcepted token, excpected ((28:18) index.android.js:23:18 

回答

1

有几个错误在你的代码中。
1.使用setState更新电影属性。

this.getMoviesFromApi().then((res) => { 
    this.setState({ 
     movies: res 
    }); 
    }); 

async function getMoviesFromApi() 2.应该只是async getMoviesFromApi()
3.在render功能,包Text内部View和通过电影阵列回路。示例 -

return(
    <View> 
     {this.state.movies.map(m => (
     <Text key={m.title}> {m.title} </Text>))} 
    </View> 
); 
+0

谢谢先生。你能告诉我在哪里可以找到一些很好的教程来开始反应原生?我对这项技术非常感兴趣,但是我是一个初学者,反应如下@vinayr – leartengineer

+0

这个教程很不错https://www.raywenderlich.com/126063/react-native-tutorial – vinayr