Question

我是RN的新手，我正在寻找解决这个问题的方法。我在网上发现了很多信息，但它仍无效。

这是我的初始代码：

import { StackNavigator, NavigationActions } from 'react-navigation';
...

我的功能是从数据源填充listitem：

list(rowData, sectionID, rowID) {
  var onPress = () => this.props.navigation.goBack();
  return (
    <ListItem thumbnail onPress={onPress}>
      <Body>
        <Text>{rowData.Title}</Text>
        <Text numberOfLines={2}>
          <Icon name="map-marker" size={15} color="grey" />
          {rowData.Address}, {rowData.City} ({rowData.Distance} km)
        </Text>
        <Text numberOfLines={3}>{rowData.Description}</Text>
      </Body>
      {VerifiedUser}
    </ListItem>
  );
}

onPress操作向我发送错误消息：

undefined不是一个对象（评估 '_this2.props.navigation.goBack（）'

 render() {        
   return(    
     <Container> 
       <View style={styles.fill}>
         <ScrollView style={styles.fill}>
           <View style={styles.scrollViewContent}>
             <ListView
               dataSource={this.state.dataSource}
               renderRow={this.list.bind(this)} 
               enableEmptySections={true}
             />    
           </View>    
         </ScrollView>
       </View>
     </Container>
   );
 }

看起来这个组件没有得到认可。有任何帮助来理解这个错误吗？

谢谢！

Answer 1

我假设您正在使用ListView而list是renderRow函数的函数。由this未绑定导致的错误。您可以在React Documentation for Handling Events上了解更多信息。

您需要绑定您的函数以在其中使用this。你有几个选择。

第一个选项是内联绑定，

<ListView renderRow={this.list.bind(this)} />

第二个选项是构造函数中的绑定，

class SomeComponent extends React.Component {
  constructor(props) {
    super(props);
    this.list = this.list.bind(this);
  }

  list(rowData, sectionID, rowID) {
    // ...
  }

  render() {
    return(<ListView renderRow={this.list} />)
  }
}

第三个选项是使用箭头功能

class SomeComponent extends React.Component {
  list = (rowData, sectionID, rowID) => {
    // ...
  }

  render() {
    return(<ListView renderRow={this.list} />)
  }
}

在ListView中导航时出现问题

1 个答案: