@@ -214,57 +214,55 @@ https://facebook.github.io/react-native/docs/using-a-listview
214
214
https://facebook.github.io/react-native/docs/network
215
215
216
216
``` ts
217
- import React from ' react' ;
218
- import { FlatList , ActivityIndicator , Text , View } from ' react-native' ;
217
+ import React from " react" ;
218
+ import { FlatList , ActivityIndicator , Text , View } from " react-native" ;
219
219
220
-
221
- type DataItem = { title: string , releaseYear: string , id: string }
222
- type State = {
223
- isLoading: boolean ,
224
- dataSource? : DataItem []
225
- }
220
+ type DataItem = { title: string ; releaseYear: string ; id: string };
221
+ type State = {
222
+ isLoading: boolean ;
223
+ dataSource? : DataItem [];
224
+ };
226
225
export default class FetchExample extends React .Component <{}, State > {
227
-
228
226
constructor (props ) {
229
227
super (props );
230
- this .state = { isLoading: true }
228
+ this .state = { isLoading: true };
231
229
}
232
230
233
231
componentDidMount() {
234
- return fetch (' https://facebook.github.io/react-native/movies.json' )
235
- .then ((response ) => response .json ())
236
- .then ((responseJson : {movies: any }) => {
237
-
238
- this .setState ({
239
- isLoading: false ,
240
- dataSource: responseJson .movies ,
241
- }, function () {
242
-
243
- });
244
-
232
+ return fetch (" https://facebook.github.io/react-native/movies.json" )
233
+ .then (response => response .json ())
234
+ .then ((responseJson : { movies: any }) => {
235
+ this .setState (
236
+ {
237
+ isLoading: false ,
238
+ dataSource: responseJson .movies
239
+ },
240
+ function () {}
241
+ );
245
242
})
246
- .catch (( error ) => {
243
+ .catch (error => {
247
244
console .error (error );
248
245
});
249
246
}
250
247
251
-
252
-
253
248
render() {
254
-
255
249
if (this .state .isLoading ) {
256
250
return (
257
251
< View style = {{ flex : 1 , padding : 20 }}>
258
252
< ActivityIndicator / >
259
253
< / View >
260
- )
254
+ );
261
255
}
262
256
263
257
return (
264
258
< View style = {{ flex : 1 , paddingTop : 20 }}>
265
259
< FlatList
266
260
data = {this.state.dataSource }
267
- renderItem = {({ item }) => <Text>{item .title }, {item .releaseYear }</Text>}
261
+ renderItem = {({ item }) => (
262
+ <Text>
263
+ {item .title }, {item .releaseYear }
264
+ </Text>
265
+ )}
268
266
keyExtractor = {({ id }, index) => id }
269
267
/ >
270
268
< / View >
0 commit comments