Question

单击文本时，我收到错误消息“未定义不是对象（评估'_this2.categoryClicked.bind'）”

我认为错误是“onPress = {（）=＆gt; this.categoryClicked.bind（this）}”单击按钮时必须有不同的方法来调用categoryClicked函数。我的代码出了什么问题？

class CategoriesView extends React.Component {
  constructor(props){
    super(props)
  }

categoryClicked(){
    this.props.categoryPressed(this.props.Category);
}

renderSubCategory(){
    return(
        this.props.Category.sub_category.map(function(subCategory, i){
            return(
                <View style={styles.abcd}>
                    <TouchableHighlight onPress={()=>this.categoryClicked.bind(this)}>
                        <Text>{subCategory.title}</Text>
                    </TouchableHighlight>
                </View>
            )
        })
    )
}

render(){
    return(
        <View style={{flex:1}}>
            <View style={styles.avf}>
                <Text>{this.props.Category.heading}</Text>
            </View>
            <View style={styles.ddd}>
                {this.renderSubCategory()}
            </View>
        </View>
    )
 }
}

Answer 1

我相信你想做的是onPress={this.categoryClicked.bind(this)}而不是箭头功能。 .bind(this)返回一个函数，其中上下文正确绑定到this，因此，它不会被调用。

另外，我建议将绑定放在构造函数中，因为您不希望每次组件重新渲染时都会发生绑定。 e.g。

constructor(props) {
  super(props);
  this.categoryClicked = this.categoryClicked.bind(this);
}

然后使用onPress={this.categoryClicked}

如果您想传递sub-category，可以

constructor(props) {
  super(props);

  this.subcategoryClicked = props.Category.sub_categories.map(sub_category => this.categoryClicked.bind(this, sub_category));
}

然后在render：

中使用

this.props.Category.sub_category.map(function(subCategory, i) {
  <View style={styles.abcd}>
    <TouchableHighlight onPress={this.subcategoryClicked[i]}>
      <Text>{subCategory.title}</Text>
    </TouchableHighlight>
  </View>

P.S，我不确定这是否是一个好的模式。如果你不喜欢这样做，请坚持this.categoryClicked(bind, subcategory)。这是我不确定优化是否值得的事情之一。

Answer 2

这在onPress={()=>this.categoryClicked.bind(this)}>指向sub_category.map函数。它应该指向类。可以这样做而不是

return (
  this.props.Category.sub_category.map((subCategory, i) => { // <--- this way context is preserved 
    // other lines
    onPress={()=>this.categoryClicked.bind(this, subCategory)}>
    // other lines
  })
);

<{1}}方法中的

应该是可访问的

categoryClicked

OnPress上的ReactNative错误

2 个答案: