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

时间:2019-10-14 08:31:33

标签: reactjs react-native

实际上,我试图通过遵循此guide实际上在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')

这是Dashboard.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>
        );
      }
    }

1 个答案:

答案 0 :(得分:2)

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

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