react-native - 无法调用 FlatList renderRow 上的方法？

Question

我有一个简单FlatList的 youtube 视频列表，如下所示：

<FlatList 
  data={this.props.videoList}
  renderItem={this.renderRow}
  keyExtractor={(item) => item.id.videoId.toString()}
/>

对于每个renderRow函数，我都需要一个 API 调用来检索喜欢的数量YOUTUBE API并返回一个组件，如下所示：

renderRow({ item }) {
  const something = this.getIndividualStatistics(item);
  return (<SomeComponent />);
}

下面是函数getIndividualStatistics

getIndividualStatistics = async item => {
  const { data } = await axios.get('youtubeAPI bla bla bla');
  return data;
}

我在尝试加载时出错FlatList

标签： react-nativeexporeact-native-flatlist

Answer 1

您需要renderRow在构造函数中绑定，否则thisinrenderRow将引用自身：

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

或者声明renderRow为箭头函数：

renderRow = ({ item }) => {

请参阅此处了解更多信息。