ListView DataSource не отображает данные при переводе в состояние - PullRequest
Новая
       25

ListView DataSource не отображает данные при переводе в состояние

0 голосов
/ 30 мая 2018

Я новичок в React Native.У меня есть следующий renderInitialView () в моем коде.Моя функция renderInitialView () отображает данные в виде списка, если я напишу нижеприведенный оператор в этой функции renderInitialView, 

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

если я объявлю тот же Statemnet внутри состояния, тогда мой просмотр списка начнет выдавать ошибку, ошибкаundefined не является функцией (оценивается как _this.state ({dataSource: ds.cloneWithRows (_this.props.services}) ')), ниже представлена ​​моя функция 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;

Любая помощь будет высоко оценена.

1 Ответ

0 голосов
/ 31 мая 2018

ЭТО может вам помочь.Вам может потребоваться инициализировать ваши данные как пустые []. 

var DATA =[];

Сделайте эту строку за пределами вашего класса

...