反应原生语法错误意外令牌提取api

时间:2017-10-17 13:29:42

标签: javascript json reactjs api react-native

我在使用世博会的Windows和我的带有世博应用程序的iphone 5上使用本机反应。 我希望从Web服务api获取数据,使用React Native我有这个错误:App.js:意外令牌(15:6) 我希望从webservice获取响应数组

这是我的代码:

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

export default class App extends Component {



fetch('https://httpbin.org/get').then(function (response) {
        return response;
      }).then(function (response) {
        setTimeout(function () {
          main.setState({
            infoStatus: 'loaded'
          });
        }, 300);
        return response.json();
      }).then(function (data) {alert(data);
        main.setState({
          city: data.name,
          country: data.sys.country,
          temperature: data.main.temp,
          humidity: data.main.humidity,
          wind: data.wind.speed
        });
      }).catch(function () {
        main.setState({
          infoStatus: 'error'
        });
      });

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome
        </Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
})

2 个答案:

答案 0 :(得分:0)

您可能希望将代码放入componentDidMount生命周期钩子。

class App extends Component {
  componentDidMount () {
    fetch() ...
  }

  render () {
  }
}

答案 1 :(得分:0)

代码中的'main'对象是什么? 为什么要使用setTimeout?

你需要将fetch调用放在方法中... 通常你会在componentWillMount中做到这一点 例如:

lineStart