如何实现FlatList点击项完成API请求后显示绿色对勾

核心思路 #

通过状态记录API请求成功的列表项ID，渲染时根据状态判断是否显示绿色对勾——优先用item的唯一ID而非索引，避免列表排序、增删导致的标识错误。

步骤1：添加状态管理 #

用Set存储请求成功的项ID（查询效率更高，且自动去重）：

import { useState } from 'react';

// 在主组件内定义状态
const [successItemIds, setSuccessItemIds] = useState(new Set());

步骤2：编写点击事件与API请求逻辑 #

点击列表项时调用API，成功后更新状态：

const handleItemPress = async (item) => {
  try {
    // 替换为你的实际API请求，携带item的参数
    const response = await fetch(`https://your-api-url.com/action?itemId=${item.id}`);
    
    if (response.ok) {
      // 请求成功，将当前item的ID加入成功集合
      setSuccessItemIds(prev => new Set([...prev, item.id]));
    }
  } catch (err) {
    console.error('API请求失败:', err);
  }
};

步骤3：修改FlatList的renderItem传递标识 #

给Item组件传递showTick参数，判断当前项是否需要显示对勾：

<FlatList
  data={yourDataSource} // 替换为你的实际数据源
  renderItem={({ item }) => (
    <Item
      item={item}
      onPress={() => handleItemPress(item)}
      backgroundColor={/* 你的背景色样式 */}
      textColor={/* 你的文字颜色样式 */}
      showTick={successItemIds.has(item.id)} // 核心：判断是否显示对勾
    />
  )}
  keyExtractor={item => item.id.toString()} // 用item的唯一ID作为key，避免索引问题
/>

步骤4：修改Item组件条件渲染对勾 #

接收showTick参数，仅当为true时显示绿色对勾：

const Item = ({ item, onPress, backgroundColor, textColor, showTick }) => (
  <TouchableOpacity onPress={onPress} style={backgroundColor}>
    <View style={{ flexDirection: 'row', width: '100%', justifyContent: 'space-between' }}>
      <Text style={textColor}>{item?.name}</Text>
      {/* 条件渲染：仅showTick为true时显示对勾 */}
      {showTick && (
        <Image
          source={Images.greenTick}
          style={{ width: 20, height: 20 }}
        />
      )}
    </View>
  </TouchableOpacity>
);

扩展：支持取消对勾（可选） #

如果需要再次点击取消对勾（比如调用取消API），修改点击事件逻辑：

const handleItemPress = async (item) => {
  try {
    const isSuccess = successItemIds.has(item.id);
    if (isSuccess) {
      // 调用取消API
      const cancelRes = await fetch(`https://your-api-url.com/cancel?itemId=${item.id}`);
      if (cancelRes.ok) {
        // 移除成功集合中的ID
        setSuccessItemIds(prev => {
          const newSet = new Set(prev);
          newSet.delete(item.id);
          return newSet;
        });
      }
      return;
    }
    // 首次请求API
    const response = await fetch(`https://your-api-url.com/action?itemId=${item.id}`);
    if (response.ok) {
      setSuccessItemIds(prev => new Set([...prev, item.id]));
    }
  } catch (err) {
    console.error('请求失败:', err);
  }
};

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