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

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} /> 

我更喜欢第二种方式