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

【问题标题】：Couldnt call method on FlatList renderRow?无法在 FlatList 渲染行上调用方法？
【发布时间】：2018-11-22 01:26:03
【问题描述】：

我有一个简单的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 时出错

【问题讨论】：

【解决方案1】：

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

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

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

renderRow = ({ item }) => {

请参阅here 了解更多信息。

【讨论】：