React Native FlatList重复加载数据库数据问题求助

你的代码存在两个核心问题，导致了数据无限重复加载：

1. 数据请求逻辑直接写在组件顶层，每次组件重新渲染（比如调用setDBList后）都会重复执行，进而再次触发setDBList，形成循环。
2. keyExtractor没有返回值，FlatList无法正确识别列表项，可能引发额外的重复渲染。

修复后的代码： #

import {View, FlatList} from 'react-native';
import React, {useState, useEffect} from 'react';

export const MyFunctionalComponent = () => {
  const [dBList, setDBList] = useState(null);

  // 用useEffect包裹数据请求，空依赖确保仅在组件挂载时执行一次
  useEffect(() => {
    // 若getDbList本身是异步函数（返回Promise），直接调用处理结果
    getDbList().then(result => {
      setDBList(result);
    }).catch(error => {
      // 可添加错误处理逻辑
      console.error('加载数据失败:', error);
    });
  }, []); // 空依赖数组：仅执行一次

  const renderItem = ({item}) => {
    return (
      <View key={item.myGUID.toString()} />
    );
  };

  return (
    <View>
      {dBList && (
        <FlatList
          data={dBList}
          renderItem={renderItem}
          keyExtractor={item => {
            // 修复：返回列表项的唯一标识
            return item.myGUID.toString();
          }}
        />
      )}
    </View>
  );
};

关键修复说明： #

• 使用useEffect钩子：将数据获取逻辑放入useEffect并传入空依赖数组[]，确保这段代码仅在组件第一次挂载时执行一次，不会随组件重新渲染重复触发。
• 修复keyExtractor：必须返回每个列表项的唯一标识（此处为item.myGUID.toString()），FlatList依赖这个值高效管理列表项，避免无意义的重复渲染。
• 简化异步逻辑：如果getDbList本身返回Promise，无需额外包裹新的Promise，直接调用并处理结果即可。

内容的提问来源于stack exchange，提问作者Program-Me-Rev