为什么ref不能在FlatList组件中工作？

Question

​

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);

​

为什么它给了一个错误，未定义的不是一个对象？当滚动时，on涡旋方法将启动。此方法启动scrollToEnd。ScrollToEnd方法在这里。https://facebook.github.io/react-native/docs/scrollview.html#scrolltoend如何正确地编写代码?为什么它给一个错误未定义是一个对象？当滚动时，on涡旋方法将启动。此方法启动scrollToEnd。ScrollToEnd方法在这里。https://facebook.github.io/react-native/docs/scrollview.html#scrolltoend如何正确编写代码？

Answer 1

您的_onscroll方法没有绑定，因此this处于错误的上下文中。这就是为什么ref是undefined的原因。要么将其绑定到构造函数中：

constructor(props) {
    super(props);

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

或将其转换为一个箭头函数，该箭头函数将自动将其绑定到类的上下文：

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

这是一个很常见的错误。如果您发现自己经常犯这个错误，那么您应该仔细研究一下ES6语法和this。我将把它标记为副本，但回答是为了直接回答你的问题。