2016-12-03 114 views
0

我是新使用Redux和我开发一个listViewfirstNamelastName显示一些contactsreact native来。当我连续按下时,该行应该改变其风格。阵营原住民 - 终极版 - 错误:未定义不是对象 - _renderRow的ListView

渲染的初始化情况很好,但是当我按排,我得到这个错误:

undefined is not an object (evaluating 'this.props.contact.firstName') 

我相信,我传递给datasource的对象是空的,但我真的不知道如何解决它。我试图在加载datasource时将状态添加到true,但它不起作用。

这是我的代码:

class ParticipantsListComponent extends Component<StateProps, { dataSource: ListViewDataSource }> { 
constructor(props: StateProps) { 
    super(props); 
    let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 != r2 }); 
    this.state = { 
     dataSource: ds.cloneWithRows(this.props.participants) 
    }; 
} 

componentWillReceiveProps(nextProps: StateProps) { 
    if (nextProps.participants !== this.props.participants) { 
     this.setState({ 
      dataSource: this.state.dataSource.cloneWithRowsAndSections(nextProps.participants) 
     }); 
    } 
} 

_renderRow = (entry: { contact: Contact, selected: boolean }, section: number, row: number) => { 
    return (
     <ParticipantsListItem 
      contact={entry.contact} 
      selected={entry.selected} /> 
    ); 
} 

render() { 
    return (
     <View style={styles.viewStyles}> 
      <TextInput style={styles.textInputStyles} /> 
      <ListView 
       dataSource={this.state.dataSource} 
       renderRow={this._renderRow.bind(this)} 
     </View> 
    ); 
} 
} 

export const ParticipantsList: ComponentClass<void> = connect(
(state: StoreState, ownProps: void): StateProps => ({ 
    participants: state.contacts.contacts.map(contact => 
    ({ 
     contact, 
     selected: state.newTopic.participants.contains(contact.id) 
    })).toArray() 
}), 
dispatch => ({}) 
)(ParticipantsListComponent) as ComponentClass<any>; 

基本上我需要找到一种方法来确保我传递给dataSource的数据不是不确定的。如果有人知道解决方案,我会很高兴听到它。

你会发现在ParticipantListItemComponent正确的代码如下:

class ParticipantsListItemComponent extends Component<OwnProps & DipatchProps, void> { 
    render() { 
    return (
     <TouchableOpacity onPress={() => this.props.onPress(this.props.contact.id)} style={styles.container} > 
      <Text style={styles.name}>{!this.props.selected ? this.props.contact.firstName : ''} {this.props.contact.lastName}</Text> 
      <View style={{ flex: 1 }} /> 
     </TouchableOpacity> 
    ); 
    } 
} 

export const ParticipantsListItem: ComponentClass<OwnProps> = connect(
    (state: void, ownProps: void): {} => ({}), 
    dispatch => ({ 
    onPress: (id: string) => dispatch(toggleParticipant(id)) 
    }) 
)(ParticipantsListItemComponent); 
+0

你能告诉我们你的'connect'函数吗? – martinarroyo

+0

当然是的,我甚至没有注意到我忘了 – C00kieMonsta

+0

我认为你的问题所在了'ParticipantsListItem'组件中,由于初始渲染工作。对不起再次提问,但是,您是否介意发布该组件? – martinarroyo

回答

0

的解决办法是使用cloneWithRows而不是cloneWithRowsAndSections

相关问题