2016-11-13 93 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