React-Native学习笔记：FlatList从网络获取数据

React-Native从网络获取数据，刷新FlatList

因为从网络获取数据是会改变的，所以首先要有一个state来存储需要改变的数据：（前面说到的在constructor中来初始化state）。

  constructor(props){
      super(props);
      this.state = {data: null};
  }

请求网络数据的代码：

  getData (){
      fetch('https://facebook.github.io/react-native/movies.json')
        .then((response) => response.json())
        .then((responseJson) => {
             this.setState({
                // 请求到网络数据后设置state
                data: responseJson.movies,
              })
          })
          .catch((error) => {
              console.error(error);
          });
    }

最后设置FlatList：

<FlatList data = {this.state.data} renderItem = {({item}) => <Text style = {styles.item}>{item.title}</Text>}/>

全部代码如下：

export default class App extends Component {
  constructor(props){
    super(props);
    this.state = {data: null};
  }

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

      this.setState({
        data: responseJson.movies,
      })
    })
    .catch((error) => {
      console.error(error);
    });
  }

  componentDidMount() {
    this.getData();
  }

  render() {
    if(!this.state.data){
       return (<Text>没数据啊</Text>);
     }
    return (
      <FlatList data = {this.state.data} renderItem = {({item}) => <Text style = {styles.item}>{item.title}</Text>}/>
    );
  }
}