ListView DataSource 在放入状态时不显示数据

Question

我是 React Native 的新手。我的代码中有以下 renderInitialView() 。如果我在此 renderInitialView 函数中编写以下语句，我的 renderInitialView() 函数将在列表视图中显示数据，

 this.dataSource = ds.cloneWithRows(this.props.services);

如果我在状态中声明相同的 statemnet 然后我的列表视图开始抛出错误，错误是未定义的不是函数（评估'_this.state（{dataSource：ds.cloneWithRows（_this.props.services})'), 下面是我的带有 state

的 renderinitialView() 函数

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

    this.state({
       dataSource : ds.cloneWithRows(this.props.services)
 }

//);
   // this.dataSource = ds.cloneWithRows(this.props.services);

    if (this.props.detailView === true) {
      return (
        <ServiceDetail />
      );
    } else {
      return (
        <ListView 
          enableEmptySections={true}
          dataSource={this.dataSource}
          renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
          renderHeader={this.renderHeader}
          renderRow={(rowData) => 
            <ServiceItem services={rowData} />

          }
        />
      );
    }
  }



  render() {
    return (
      <View style={styles.container}>
        {this.renderInitialView()}
      </View>
    );
  }
}

如果我删除状态并只写

this.dataSource = ds.cloneWithRows(this.props.services);

然后我的列表视图显示数据。我想在状态内显示带有数据源的列表视图。我不确定我做错了什么。下面是我整个页面的代码。如果我删除

，代码就可以工作

 this.state({
       dataSource : ds.cloneWithRows(this.props.services)
 }

并将其替换为

this.dataSource = ds.cloneWithRows(this.props.services);

下面是我页面上带有构造函数的完整代码

 import React, { Component } from 'react';
import { Text, View, StyleSheet, ListView } from 'react-native';
import { Provider, connect } from 'react-redux';
import { createStore } from 'redux'
import reducers from '../reducers/ServiceReducer';
import ServiceItem from './ServiceItem';
import Icon from 'react-native-vector-icons/EvilIcons';
import ServiceDetail from './ServiceDetail';

const styles = StyleSheet.create({


  separator: { 
        flex: 1, 
       height: StyleSheet.hairlineWidth, 
       backgroundColor: '#8E8E8E', 
       },

       text: {
        marginLeft: 12,
        fontSize: 16,
      },
      header_footer_style:{

        width: '100%', 
        height: 45, 
        backgroundColor: '#FF9800'

    },
    textStyle:{

      alignSelf:'center',
      color: '#fff', 
      fontSize: 18, 
      padding: 7

    }


});


const store = createStore(reducers);

class AutoCompActivity extends Component {

  constructor(props) {

    super(props);

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

    this.state({
       dataSource : ds.cloneWithRows(this.props.services)

  }
)
  }

  renderHeader = () => {

    var header = (

    <View style={styles.header_footer_style}>

      <Text style={styles.textStyle}> Tap the service to find the Loaction </Text>

    </View>

    );

    return header;

  };

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

    this.state({
       dataSource : ds.cloneWithRows(this.props.services)
 }

//);
   // this.dataSource = ds.cloneWithRows(this.props.services);

    if (this.props.detailView === true) {
      return (
        <ServiceDetail />
      );
    } else {
      return (
        <ListView 
          enableEmptySections={true}
          dataSource={this.dataSource}
          renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
          renderHeader={this.renderHeader}
          renderRow={(rowData) => 
            <ServiceItem services={rowData} />

          }
        />
      );
    }
  }



  render() {
    return (
      <View style={styles.container}>
        {this.renderInitialView()}
      </View>
    );
  }
}



const mapStateToProps = state => {
  return { 

    services: state.services,
    detailView: state.detailView,
  };
};
const ConnectedAutoCompActivity = connect(mapStateToProps)(AutoCompActivity);


const app1 = () => (
  <Provider store={store}>
    <ConnectedAutoCompActivity />
  </Provider>
)

export default app1;

任何帮助将不胜感激。

Answer 1

可能会对您有所帮助。您可能需要将数据初始化为空 [].

var DATA =[];

在您的 class

之外执行此行

ListView DataSource 在放入状态时不显示数据

ListView DataSource is not displaying data when put inside state

reactjs

react-native

react-android