React native：ListView不呈现行

Question

我正在使用redux来获取列表数据。我已经很好地加载了列表数据。 <Text>no Data</Text>消失了。但是，ListView不会呈现任何行。 我

这是我的代码（删除日志代码）：

 import React, {PropTypes,Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
  Image,
  Dimensions,
} from 'react-native';

import {bindActionCreators} from 'redux';
import { fetchDocotorList }  from '../../actions/findActions'
import { connect }   from 'react-redux';
const {width} = Dimensions.get('window');
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
 class DoctorList extends Component {

  constructor(props) {
    super(props);
    this.state = {
      dataSource: ds.cloneWithRows([]),
      loaded: false,
    };
  }

  componentDidMount(){
    this.props.fetchDocotorList();
  }

   componentWillReceiveProps(nextProps){
    if(nextProps.loaded){
      this.setState({
        dataSouce:this.state.dataSource.cloneWithRows(nextProps.doctorList),
        loaded: nextProps.loaded,
      })
    }
   }

   render() {
     const { doctorList } = this.props;
     const { loaded } = this.state;
     if(!loaded){
       return (
           <View>
             <Text>no Data</Text>
           </View>
              )
     }else{
       return (
              <View style={styles.container}>
             <View style={styles.listViewBox}>
               <ListView style={{flex: 1}} enableEmptySections={true}
                         dataSource={this.state.dataSource}  renderRow={
                 (rowData, sectionID, rowID, highlightRow) => {
                   return (
                            <Text>{rowID}</Text>
                   );
                 }
               }/>
             </View>
           </View>
       );
     }
  }
}

DoctorList.defaultProps = {
  fetchDocotorList: [],
};

DoctorList.propTypes = {
  doctorList:PropTypes.array,
  loaded:PropTypes.bool,
  fetchDocotorList: PropTypes.func.isRequired,
}

const mapStateToProps = (state) => {
  return {
    doctorList: state.find.doctorList,
    loaded :state.find. fetched,
  };
};

const mapDispatchToProps = dispatch => (
    bindActionCreators({
      fetchDocotorList,
    }, dispatch)
);

export default connect(mapStateToProps, mapDispatchToProps)(DoctorList);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ebf0f2',
  },
  listViewBox: {
    marginTop: 6,
    flex: 7,
    width: width,
    backgroundColor:'blue'
  },
  listStyle: {
    flexDirection: 'row',
    height: 148,
    width:width,
    backgroundColor: '#f00',
  },
  rowVContent: {
    flex: 4,
    flexDirection: 'column',
    justifyContent: 'space-around',
  },
  leftHeaderView: {
    flex:1,
    justifyContent:'flex-start',
    alignItems:'center',
  },
  headerImage: {
    width: 49,
    height: 49,
  },
  rowVContentTop: {
    flexDirection:'row',
    justifyContent:'space-between',
  },
  rowVTopTextBox: {
    width:'60%',
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'baseline',
  },
  rowTName: {
    fontFamily: 'STHeitiSC-Medium',
    color:'#00326D',
    fontWeight:'900',
    fontSize:15,
  },
  rowTDepartment: {
    fontFamily: 'STHeitiSC-Medium',
    fontSize:12.5,
    fontWeight:'700',
    color:'#323232',
  },
  rowTDegree: {
    fontSize:12.5,
    fontWeight:'700',
    color:'#323232',
  },
  rowTHospital: {
    fontSize:12.5,
    fontWeight:'700',
    color:'#323232',
  },
  rowVTopScore: {
    marginRight:15,
    flexDirection:'row',
    alignItems:'center'
  },
  rowIScore: {
    width:9,
    height:9,
  },
  rowTScore: {
    fontFamily: 'STHeitiSC-Medium',
    color:'#FFB400',
    fontSize:15,
  },
  rowTSkill: {
    fontFamily: 'STHeitiSC-Medium',
    fontSize:12.5,
    fontWeight:'700',
    color:'#9B9B9B',
    marginRight:40,
  },
  rowTdiagnoseCount: {
    fontFamily: 'STHeitiSC-Medium',
    fontSize:12.5,
    fontWeight:'700',
    color:'#9B9B9B',
  },
  cellBottomLine: {
    width:'100%',
    height:1,
    backgroundColor:'#DADADA'
  },
  bottomView: {
    flexDirection:'row',
    width:'70%',
    justifyContent:'space-around'
  },
  bottomIDocument: {
    width:13,
    height:16,
  },
  bottomViewBox: {
    flex:1,
    flexDirection:'row',
  },
  bottomIPhone: {
    width:15,
    height:15,
  },
  bottomTText: {
    fontFamily: 'STHeitiSC-Medium',
    fontSize:12.5,
    fontWeight:'700',
    color:'#9B9B9B',
  },

});

Answer 1

看起来你有一个错字。你想要：

dataSource={this.state.dataSource}

但您要将dataSouce设置为州。 （注意那里没有r）