安卓端Shopify Flashlist多选列表重渲染异常问题求助

针对你遇到的安卓端FlashList在两次选中/取消操作后无法触发重渲染的问题，以下是几个可行的修复方案：

1. 改用数值型的extraData触发重渲染 #

安卓端的FlashList对数组类型的extraData可能存在浅比较检测偏差，换成每次操作都会递增的数值，可强制触发列表重渲染：

// 新增计数状态
const [updateTrigger, setUpdateTrigger] = useState(0);

const onPressMedia = useCallback((media: AssetType) => {
  setSelectedMedia((selected) => {
    const index = selected.findIndex((m) => m.id === media.id);
    let newSelected;
    if (index !== -1) {
      newSelected = [...selected.slice(0, index), ...selected.slice(index + 1)];
    } else {
      newSelected = [...selected, media];
    }
    // 每次更新选中项后递增计数，强制触发重渲染
    setUpdateTrigger(prev => prev + 1);
    return newSelected;
  });
}, []);

// FlashList的extraData改用updateTrigger
<FlashList
  estimatedItemSize={height / 6}
  data={assets}
  numColumns={3}
  keyExtractor={(item) => item.id}
  renderItem={renderItem}
  extraData={updateTrigger}
/>

2. 优化List组件的状态计算逻辑 #

确保List组件内部能正确响应selectedMedia的变化，通过useMemo缓存选中状态的计算结果，既避免重复计算又保证依赖更新时重新计算：

// List组件内部修改
import { useMemo } from 'react';

const List = ({ item, onPressMedia, selectedMedia }) => {
  // 用useMemo缓存选中索引，依赖selectedMedia和item.id
  const indexInSelectedMedia = useMemo(() => {
    return selectedMedia.findIndex((m) => m.id === item.id);
  }, [selectedMedia, item.id]);

  return (
    // ... 你的其他组件代码
    {indexInSelectedMedia > -1 && (
      <View
        position="absolute"
        height={24}
        width={24}
        style={{
          backgroundColor: "#1D3557",
        }}
      >
        <Text variant="body-s-bold" color="textOnPrimary">
          {indexInSelectedMedia + 1}
        </Text>
      </View>
    )}
  );
};

3. 确保selectedMedia的引用始终更新 #

尝试在添加选中项时创建对象副本，避免原对象引用导致的潜在浅比较问题：

const onPressMedia = useCallback((media: AssetType) => {
  setSelectedMedia((selected) => {
    const index = selected.findIndex((m) => m.id === media.id);
    if (index !== -1) {
      return [...selected.slice(0, index), ...selected.slice(index + 1)];
    } else {
      // 创建media的副本，确保引用唯一
      return [...selected, {...media}];
    }
  });
}, []);

4. 检查FlashList多列模式兼容性 #

安卓端FlashList在numColumns多列模式下可能存在渲染优化bug，可暂时移除numColumns={3}测试是否恢复正常。若问题消失，可尝试：

• 升级FlashList到最新版本（排查是否有针对多列重渲染的修复）
• 改用自定义多列布局（如ScrollView+手动排版的组合）

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