React Native中FlatList的_handleRenderItem函数被调用两次问题排查

这个问题我之前在开发React Native项目时也碰到过，结合你的代码来看，主要有几个可能的原因和对应的解决办法：

1. 开发模式下StrictMode的双重渲染（最常见原因） #

React Native在开发环境中默认启用了StrictMode，它会对组件的渲染、生命周期函数、以及FlatList的renderItem等方法进行额外的校验，目的是帮你提前发现代码中的副作用问题。这种校验会导致相关函数被调用两次：

• 第一次调用是StrictMode的检查流程，此时可能数据还未完全就绪，或者处于临时状态，导致produto.item为空；
• 第二次是正常的业务渲染，数据已经正确传入。

解决办法： #

这是开发环境的正常现象，生产打包后会自动消失，不需要额外修改代码。但如果想在开发时避免空item的渲染，可以在_handleRenderItem里增加空值判断：

_handleRenderItem = (produto) => {
  // 先判断item是否存在，不存在则返回null不渲染
  if (!produto?.item) return null;
  return (
    <ItemAtualizado item={produto.item} />
  );
}

2. 初始state与数据更新的时序问题 #

你的组件初始state设置为dataSource: []，第一次render时FlatList的数据源是空数组，理论上不会触发renderItem，但如果listarProdutos存在同步逻辑（比如从本地缓存读取数据时立即返回），可能会在componentDidMount执行时快速更新state，加上StrictMode的双重渲染，就会出现两次调用的情况。

优化方案： #

• 将初始state改为null，在数据未加载完成时显示加载状态，避免FlatList在空数据时的无效渲染：

constructor(props) {
  super(props);
  this.state = { dataSource: null };
  // 注意：箭头函数会自动绑定this，下面两行bind代码是冗余的，可以删除
  // this._handleRenderItem = this._handleRenderItem.bind(this);
  // this._keyExtractor = this._keyExtractor.bind(this);
}

然后在render中判断数据源状态：

render() {
  // 数据未加载完成时显示加载提示
  if (!this.state.dataSource) {
    return (
      <Container style={styles.container}>
        <Content>
          <Text style={{ textAlign: 'center', padding: 20 }}>加载中...</Text>
        </Content>
      </Container>
    );
  }

  return (
    <Container style={styles.container}>
      <Content>
        <Card>
          <CardItem style={{ flexDirection: 'column' }}>
            <Text style={{ color: '#323232' }}>Produtos atualizados recentemente</Text>
            <View style={{ width: '100%' }}>
              <FlatList 
                showsVerticalScrollIndicator={false} 
                data={this.state.dataSource} 
                keyExtractor={this._keyExtractor} 
                renderItem={this._handleRenderItem} 
              />
            </View>
          </CardItem>
        </Card>
      </Content>
    </Container>
  );
}

3. 冗余的this绑定问题 #

你的代码中，_handleRenderItem和_keyExtractor都是用箭头函数定义的，箭头函数会自动绑定当前组件的this，所以constructor中的bind操作是多余的，删除这两行不仅能简化代码，还能避免潜在的绑定冲突问题。

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