如何在React Native中实现动态更新的FlatList，展示BLE设备历史及实时数据

你当前的代码每次接收到新的BLE设备数据时，直接调用setDataTest(data.value)将状态数组整体替换为单条新数据，旧的历史数据会被直接覆盖，所以只能展示最新一条事件。

你需要将新接收的数据追加到原有数组末尾，同时补充事件监听器的清理逻辑避免内存泄漏，修改后的代码如下：

import { useRef } from 'react';
// 若需要转换BLE原始二进制数据为可读字符串，可引入react-native-ble-manager提供的工具方法
// import { bytesToString } from 'react-native-ble-manager';

const [dataTest, setDataTest] = useState([]);
// 若需要新数据到来时自动滚动到底部，可声明FlatList的ref
const flatListRef = useRef(null);

const handleUpdateValueForCharacteristic = (data) => {
  // 处理原始数据（按需开启）：如果data.value是二进制/Base64格式，先转成可读内容
  // const formattedValue = bytesToString(data.value);
  // 使用函数式更新将新数据追加到历史数组末尾，保留全部历史记录
  setDataTest(prevList => [...prevList, data.value]);
};

useEffect(() => {
  const listener = bleManagerEmitter.addListener(
    "BleManagerDidUpdateValueForCharacteristic", 
    handleUpdateValueForCharacteristic
  );
  // 组件卸载时移除事件监听器，避免内存泄漏和重复触发回调
  return () => listener.remove();
}, []);

const renderData = (item) => {
  return (
    <View style={{ padding: 10, borderBottomWidth: 1, borderBottomColor: '#f0f0f0' }}>
      {/* 如果item是对象，不能直接渲染，需要转成字符串或者取对应属性展示 */}
      <Text>{typeof item === 'object' ? JSON.stringify(item) : item}</Text>
    </View>
  );
};

return (
  <>
    <SafeAreaView style={{ flex: 1 }}>
      <FlatList 
       ref={flatListRef}
       data={dataTest} 
       renderItem={({ item }) => renderData(item)}
       // 可选配置：新数据加载完成后自动滚动到底部
       onContentSizeChange={() => flatListRef.current?.scrollToEnd({ animated: true })}
      />
    </SafeAreaView>
  </>
);

• 若需要避免历史数据过多导致页面卡顿，可以在更新状态时做截断，比如setDataTest(prev => [...prev.slice(-99), newData])仅保留最近100条数据
• 可额外添加时间戳字段，每条数据存入时记录接收时间，方便展示事件顺序

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