Question

我正在导出从获取中获取的JSON。我知道我有一个绑定问题，但是我不确定如何继续将功能绑定到当前组件。我在此网址https://snack.expo.io/@mcmillster/c21pbG上有一个简单的示例。

app.js

  import React from 'react';
    import { FlatList, ActivityIndicator, Text, View  } from 'react-native';
    import { getMovies } from './utility.js';

    export default class FetchExample extends React.Component {

    constructor(props){
      super(props);
      this.state ={ 
      isLoading: true,
    }
    this.getMovies = getMovies.bind(this)
    }

    componentDidMount(){
    this.getMovies;
    }



    render(){

      if(this.state.isLoading){
        return(
          <View style={{flex: 1, padding: 100}}>
            <ActivityIndicator/>
          </View>
        )
      }

      return(
        <View style={{flex: 1, paddingTop:20}}>
          <FlatList
            data={ this.state.data }
            renderItem={({item}) => <Text>{item.title}, {item.releaseYear} 
 </Text>}
            keyExtractor={({id}, index) => id}
          />
        </View>
      );
    }
  }

utility.js

export function getMovies() {
    return fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {

        this.setState({
          isLoading: false,
          data: responseJson.movies,
        }, function(){

        });

      })
      .catch((error) =>{
        console.error(error);
      });
    }

Answer 1

在您的componentDidMount生命周期挂钩中，您没有在调用getMovies函数，而只是在引用它。将this.getMovies更改为this.getMovies()

解决方案

componentDidMount(){
  this.getMovies();
}

Answer 2

我认为您不应该尝试通过获取功能设置状态。只需调用它，返回数据并在您的组件中处理它们即可。

app.js

[...]
private getMovies = async() => {
  const movies = await getMovies();
  if(movies){
    this.setState({...})
}

componentDidMount(){
  this.getMovies();
}

utility.js

export function getMovies() {
    return fetch('https://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
        return responseJson.movies;
      })
      .catch((error) =>{
        console.error(error);
        return;
      });
    }

从React Native中的提取导出JSON

2 个答案:

解决方案