api - React Native 错误 - TypeError: undefined is not an object (evalating 'item.key')

Question

我正在尝试将此网站上的 API 用于我的 React Native 应用程序：https ://api.spacexdata.com/v2/launches

我试图密切关注 JSON 格式化程序中的 API，但收到以下错误并且不知道如何解决它：

TypeError: undefined is not an object (evaluating 'item.key')

This error is located at:
    in VirtualizedList (at FlatList.js:676)
    in FlatList (at App.js:42)
    in App
    in ExpoRoot (at renderApplication.js:40)
    in RCTView (at AppContainer.js:101)
    in DevAppContainer (at AppContainer.js:115)
    in RCTView (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:39)

defaultProps.keyExtractor
    VirtualizedList.js:467:15
_pushCells
    VirtualizedList.js:761:31
_pushCells
    VirtualizedList.js:759:13
render
    VirtualizedList.js:871:8
renderRoot
    [native code]:0
runRootCallback
    [native code]:0
Component.prototype.setState
    react.development.js:325:31
tryCallOne
    core.js:37:14
setImmediate$argument_0
    core.js:123:25
callImmediates
    [native code]:0
flushedQueue
    [native code]:0
invokeCallbackAndReturnFlushedQueue
    [native code]:0

我在 App.js 中的代码如下..

 import React from 'react'; import { ActivityIndicator, FlatList,
 Image, StyleSheet, Text, View } from 'react-native'; import { Card,
 CardItem, Item } from 'native-base'

 export default class App extends React.Component {

   constructor(propos) {
     super(propos);
     this.state = {
       isLoading: true,
       dataSource: []
     };   }

   getUserFromAPI = () => {
     return fetch('https://api.spacexdata.com/v2/launches')
       .then(response => response.json())
       .then(responseJson => {
         this.setState({
           isLoading: false,
           dataSource: this.state.dataSource.concat(responseJson.array)
         });
       })
       .catch(error => console.log(error));   };   _keyExtractor = (datasource, index) => datasource.id;   componentDidMount() {
     this.getUserFromAPI();   }

   render() {
     if (this.state.isLoading) {
       return (
         <View style={styles.progress}>
           <ActivityIndicator size="large" color="#01CBC6" />
         </View>

       );
     }

     return (
       <FlatList
         data={this.state.dataSource}
         _keyExtractor={this._keyExtractor}
         renderItem={({ item }) => (
           <Card>
             <CardItem>
               <View style={styles.container}>
                 <Image style={styles.profilepic}
                   source={{
                     uri: item.links.mission_patch
                     // from API docs 
                   }}
                 />
               </View>
               <View style={styles.userinfo}>
                 <Text>
                   Flight Number: {item.flight_number} {", Mission Name: "} {item.mission_name}
                 </Text>
                 <Text>
                   Launch date (UTC): {item.mission_id.launch_date_utc}
                 </Text>
                 <Text>
                   {item.rocket.rocket_name}
                 </Text>
                 <Text>
                   Launch Site: {item.launch_site.site_name_long}
                 </Text>
                 <Text>
                   Details: {item.details}
                   Crew: {item.crew}
                 </Text>
               </View>
             </CardItem>
           </Card>
         )}
       />
     );   } }

我的样式代码如下：

 const styles = StyleSheet.create({   container: {
     flex: 1,
     backgroundColor: '#fff',
     alignItems: 'center',
     justifyContent: 'center'   },   profilepic: {
     flex: 2,
     height: 100,
     width: 100   },   userinfo: {
     flex: 5,
     flexDirection: 'column',
     marginStart: 50   },   progress: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center'   }

 });

非常感谢。

标签： api

Answer 1

我认为您需要将 Flatlist 组件上的道具从更改_keyExtractor={this._keyExtractor}为keyExtractor={this._keyExtractor}