React-Native null 不是对象 'this.state.dataSource.map'

Question

实际上我试图按照本指南在 react-native 中使用 fetch 方法，实际上/prenotazioni 返回以下 json

[{"DESCLI_PTV":"We","ORAIN_PTV":"2019-10-09T10:00:00.000Z"},{"DESCLI_PTV":"igor","ORAIN_PTV":"2019-10-09T11:00:00.000Z"},{"DESCLI_PTV":"Giovanni","ORAIN_PTV":"2019-10-09T12:00:00.000Z"},{"DESCLI_PTV":"Veronica","ORAIN_PTV":"2019-10-09T14:00:00.000Z"},{"DESCLI_PTV":"We","ORAIN_PTV":"2019-10-09T13:00:00.000Z"},{"DESCLI_PTV":"Giovanni","ORAIN_PTV":"2019-10-09T20:00:00.000Z"},{"DESCLI_PTV":"Igor","ORAIN_PTV":"2019-10-10T11:00:00.000Z"},{"DESCLI_PTV":"Giovanni","ORAIN_PTV":"2019-10-10T13:00:00.000Z"},{"DESCLI_PTV":"We","ORAIN_PTV":"2019-10-10T12:00:00.000Z"},{"DESCLI_PTV":"We","ORAIN_PTV":"2019-10-10T15:00:00.000Z"},{"DESCLI_PTV":"Igor Mytyuk","ORAIN_PTV":"2019-10-11T14:10:00.000Z"}]

但是当我尝试运行应用程序时，它会返回错误

'

null 不是对象(评估 'this.state.dataSource.map'(

这是仪表板.JS

import React from 'react';
import { FlatList, ActivityIndicator, Text, View  } from 'react-native';
export default class Dashboard extends React.Component {
constructor(props){
super(props);
this.state ={ isLoading: true}
}
componentDidMount(){
return fetch('192.168.100.160:3000/prenotazioni')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson,
}, function(){
});
})
.catch((error) =>{
console.error(error);
});
}

render(){
if(this.state.isLoading){
return(
<View style={{flex: 1, padding: 20}}>
<ActivityIndicator/>
</View>
)
}
return(
<View style={{flex: 1, paddingTop:20}}>
<FlatList
data={this.state.dataSource}
renderItem={({item}) => <Text>{item.DESCLI_PTV}, {item.ORAIN_PTV}</Text>}
keyExtractor={({id}, index) => id}
/>
</View>
);
}
}

Answer 1

state中缺少dataSource: []。所以试试

this.state ={ isLoading: true, dataSource: [] }