无法在 FlatList 渲染行上调用方法？

Question

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

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

对于每个 renderRow 函数，我需要一个 API 调用来从 YOUTUBE API 和 return 组件中检索喜欢的数量，如下所示：

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，否则 renderRow 中的 this 将引用自身：

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

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

renderRow = ({ item }) => {

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

Couldnt call method on FlatList renderRow?