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:

 {item.title}}/>

全部代码如下:

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 (没数据啊);
     }
    return (
       {item.title}}/>
    );
  }
}

你可能感兴趣的:(React-Native学习笔记:FlatList从网络获取数据)