FlatList渲染列表项时函数回调触发问题及阻止方案咨询

先直接点出问题根源：你当前的写法onRemove={this.onRemoveCard(item)}会在每次渲染列表项时立即执行onRemoveCard(item)——虽然这个函数返回了一个用于点击的箭头函数，但外层的onRemoveCard(item)调用会在渲染阶段就触发，这就是你不想看到的情况。

下面给你两种靠谱的解决办法：

方法1：重构函数，简化传递逻辑 #

先把onRemoveCard改成直接处理业务的函数，去掉嵌套的返回逻辑：

onRemoveCard = (item) => {
  this.props.removeModal(
    'Remove Card', 
    'Are you sure want to remove this card?'
  );
};

然后在渲染CardTile时，用箭头函数包裹onRemoveCard的调用，这样只有点击时才会执行函数逻辑：

<CardTile 
  onRemove={() => this.onRemoveCard(item)} 
  subtitle={autoReoladBalance} 
  addGiftCard={false} 
/>

这种写法最清晰，也避免了不必要的函数嵌套，渲染阶段只会传递这个箭头函数的引用，不会执行内部逻辑。

方法2：保留现有函数，调整传递方式 #

如果你想保留当前onRemoveCard的嵌套写法，那可以把传递逻辑改成这样：

<CardTile 
  onRemove={() => this.onRemoveCard(item)()} 
  subtitle={autoReoladBalance} 
  addGiftCard={false} 
/>

这里的箭头函数会在点击时才执行this.onRemoveCard(item)，拿到返回的处理函数后立即调用它，这样渲染阶段就不会触发外层的onRemoveCard(item)了。

补充：为什么原来的写法会触发？ #

JSX中的属性值如果是函数调用（比如fn()），会在组件渲染时立即执行这个调用，把返回值作为属性传递。你原来的代码就是把onRemoveCard(item)的返回值（内层箭头函数）传给onRemove，但这个过程中onRemoveCard(item)已经被执行了一遍，这就是问题的核心。

内容的提问来源于stack exchange，提问作者QuokMoon