javascript - datasource.rowIdentifier 是 React Native 中的未定义错误

Question

我正在从数据库访问数据，我想在 ListView 中显示它。我正在按以下方式执行此操作。

const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

const LoadingPage=()=>(
   <View style={{backgroundColor:"blue"}}>
     <Image style={{width:150, height:100,bottom:60}} source={require('./drawable/drawable/asap.png')}/>

  </View>
)
const Row = (props) => (
  <View style={styles.container}>
  <Text style={styles.text}>
      {`${props.paymentType.name} ${props.amount} ${props.date} ${props.description}`}
  </Text>
  </View>
);

async fetchData(){
    var DEMO_TOKEN = await AsyncStorage.getItem(STORAGE_KEY);

    fetch(" http://asaptest-sas71.rhcloud.com/api/approvals", {
         method: 'get',
         dataType: 'json',
         headers: {
           'Accept': 'application/json',
           'Content-Type': 'application/json',
           'Authorization': DEMO_TOKEN
         },
        }).then((response) => 
         {
           return response.json() // << This is the problem
         }).then(function(data) { 
            console.log(data);
            const tempNames = [];    

            for(var i=0;i<data.length;i++){
              tempNames.push(data[i]);
            }
            this.setState({ approvals: tempNames,dataSource: ds.cloneWithRows(this.state.approvals)});
            alert(JSON.stringify(this.state.approvals,null,4))



          }.bind(this)).catch(function(err) {
            //alert("Error is"+err)

           console.log(err);
         })
        .done();

}
componentDidMount(){
    this.fetchData();
   setTimeout(this.setTimePassed()
          , 2000) ;
}
setTimePassed() {
 this.setState({timePassed: true});
}
render(){
  if (!this.state.timePassed){
  return <LoadingPage/>
  }
  else{
    return (

      <ListView
      dataSource={this.state.dataSource}  
     />)
  }
 }

但它给出了错误，未定义不是一个对象(评估'dataSource.rowidentifiers')请帮我解决这个问题。

Answer 1

请您重构为使用 FlatList 来代替。与 ListView 相比，它更易于使用并且有所改进。我敢打赌，当您更改为使用 FlatList 时，您的错误将会消失。

原因:http://facebook.github.io/react-native/blog/2017/03/13/better-list-views.html

文档:https://facebook.github.io/react-native/docs/flatlist.html

一篇关于从ListView迁移到FlatList的文章:https://hackernoon.com/react-native-new-flatlist-component-30db558c7a5b

干杯