反應原生：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）