Question

我有一个Flatlist，我在该渲染函数中调用其他函数

   otherFunc(){
       alert('some thing')
   }
   item(data){
      return(
          //...something..
          {this.otherFunc()} <<<<<<<<<problem is here...its undefined
      );
   }
   render() {
       <FlatList
            ref={ref => this.scrollView = ref}
            data={this.state.foods}
            extraData={this.state}
            keyExtractor={this._keyExtractor}
            renderItem={this.Item}
            horizontal
            onEndReached={(x) => { this.loadMore() }}
            onEndReachedThreshold={0.5}
      />
   }

我在this.Item中返回了一些它们已经在Flatlist中呈现的东西，但是我无法在this.item内调用组件的其他函数！而且我什至无法指向this.props.navigation或其中的任何其他this关键字。我收到未定义的对象错误。

Answer 1

在FlatList组件中使用this.item时，需要将此函数绑定到类，您可以通过以下三种主要方法：

在您的构造函数中：

contructor(props) {
    this.item = this.item.bind(this);
    // when using this.item everywhere, this will refer to the class in the method
}

如果您使用实验性的公共类字段语法，则可以使用类字段正确绑定回调：
```
item = (data) => {
  //now this refer to the class
}
```

或直接在组件中：

<FlatList
    ref={ref => this.scrollView = ref}
    data={this.state.foods}
    extraData={this.state}
    keyExtractor={this._keyExtractor}
    renderItem={(data) => this.item(data)}
    horizontal
    onEndReached={(x) => { this.loadMore() }}
    onEndReachedThreshold={0.5}
/>

我更喜欢第二种方式

如何在平面列表渲染函数中调用其他函数？

1 个答案: