为什么 ref 在 FlatList 组件中不起作用? [英] Why ref does not work in the FlatList component?

问题描述

import React, { Component } from 'react';
import { AppRegistry, Alert, FlatList, StyleSheet, Text, View } from 'react-native';

export default class FlatListBasics extends Component {
  _onscroll() {
    this.flatList.scrollToEnd( { animated: false } )
  }

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={[
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
            {key: 'Devin'},
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
          ]}
          ref={ (ref) => this.flatList = ref}
          onScrollBeginDrag={this._onscroll}
          renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
})

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FlatListBasics);

为什么会报错 undifined is not an object?滚动时， onscroll 方法启动.此方法启动 scrollToEnd.ScrollToEnd 方法在这里.https://facebook.github.io/react-native/docs/scrollview.html#scrolltoend如何正确编写代码?为什么会报错 undifined is not an object?滚动时， onscroll 方法启动.此方法启动 scrollToEnd.ScrollToEnd 方法在这里.https://facebook.github.io/react-native/docs/scrollview.html#scrolltoend如何正确编写代码?

Why does it give an error undifined is not an object? When scrolling, the onscroll method starts. This method starts scrollToEnd. ScrollToEnd method is here. https://facebook.github.io/react-native/docs/scrollview.html#scrolltoend How to write the code correctly?Why does it give an error undifined is not an object? When scrolling, the onscroll method starts. This method starts scrollToEnd. ScrollToEnd method is here. https://facebook.github.io/react-native/docs/scrollview.html#scrolltoend How to write the code correctly?

推荐答案

您的 _onscroll 方法未绑定，因此 this 位于错误的上下文中.这就是 ref 是 undefined 的原因.要么将其绑定到您的构造函数中:

You _onscroll method is not bound so this is in the wrong context. That's why the ref is undefined. Either bind it in your constructor with:

constructor(props) {
    super(props);

    this._onscroll = this._onscroll.bind(this);
}

或将其转换为自动绑定到类上下文的箭头函数:

or convert it to an arrow function that will auto bind it to the class's context:

_onscroll = () => {
    this.flatList.scrollToEnd( { animated: false } )
}

这是一个很常见的错误.如果你发现自己经常犯这个错误，你应该复习 ES6 语法和 this.我会将其标记为重复，但已回答直接解决您的问题.

This is a very common mistake. You should brush up on ES6 syntax and this if you find yourself making this mistake a lot. I'm going to flag this as a duplicate, but answered to address your question directly.

这篇关于为什么 ref 在 FlatList 组件中不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！