无法在FlatList renderRow上调用方法？

Question

我有一个简单的FlatList，其中包含YouTube视频列表，如下所示：

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

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

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

时出错

Answer 1

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

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

或者将renderRow声明为箭头函数：

renderRow = ({ item }) => {

有关详细信息，请参阅here。