Question

我目前正在尝试学习React Native，但我已经在教程的网络部分中苦苦挣扎。

这是代码：

HttpURLConnection con = URL.openConnection( "http://abc.def/someServlet" );
con.setRequestMethod( "MyMethod" );

我收到以下错误：

在我的第5行中，Char 10将是： funct 离子，所以它在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);之后需要其他东西。

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组件生命周期ComponentDidMount在渲染之后运行并调用getMovies func获取数据并使用this.setState写入状态

3 - ）检查你有if（！movies）的电影是否返回null;或者返回ActivityIndicator进行加载但是如果你没有得到电影活动指示器永远运行。

4 - ）this.setState使用新状态再次呈现组件

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

2 个答案: