React Native心愿列表多点赞功能实现技术求助

我来帮你搞定这个多点赞的问题～你之前遇到的两种方法的问题根源在于：用了单个布尔值/单个索引来控制所有商品的点赞状态，所以要么全选要么只能选一个。要实现多选点赞，我们需要用一个集合来记录所有被点赞的商品标识（比如ID或者唯一索引）。

解决思路 #

把原来的单个状态变量改成存储已点赞商品的集合（推荐用Set，操作更方便；也可以用数组或对象），每个商品的点赞状态独立判断自己是否在这个集合里，点击时只切换当前商品的状态。

完整代码示例 #

import { useState } from 'react';
import { View, TouchableOpacity, Image, Text } from 'react-native';
import FontAwesome from '@expo/vector-icons/FontAwesome';

// 假设你的组件代码
const WishlistScreen = ({ navigation }) => {
  // 用Set存储已点赞的商品ID（如果你的article没有id，也可以用索引i，但id更可靠）
  const [likedProducts, setLikedProducts] = useState(new Set());

  // 切换单个商品的点赞状态
  const toggleLike = (productId) => {
    setLikedProducts(prev => {
      const updatedSet = new Set(prev);
      // 如果已点赞就移除，没点赞就添加
      if (updatedSet.has(productId)) {
        updatedSet.delete(productId);
      } else {
        updatedSet.add(productId);
      }
      return updatedSet;
    });
  };

  // 渲染商品列表
  const ArticleList = articleData.map((article, i) => {
    // 判断当前商品是否被点赞
    const isLiked = likedProducts.has(article.id); // 这里用article的唯一id，没有的话换成i
    return (
      <View style={{ width: '42%' }} key={article.id || i}>
        <TouchableOpacity 
          onPress={() => { 
            onSubmitProduct(article.id);
            navigation.navigate('Product'); 
          }}
        >
          <Image source={article.img} style={{ height: 250, width: 200 }} />
          <View style={{ flex: 1, flexDirection: 'row', marginTop: 5, justifyContent: "space-between" }}>
            <Text style={{ fontWeight: 'bold' }}>{article.brand}</Text>
            <FontAwesome 
              name={isLiked ? "heart" : "heart-o"} 
              size={20} 
              color={isLiked ? 'red' : 'gray'} 
              onPress={(e) => {
                // 阻止事件冒泡，避免点击心形时触发外层的商品跳转
                e.stopPropagation();
                toggleLike(article.id);
              }} 
            />
          </View>
        </TouchableOpacity>
      </View>
    );
  });

  return (
    <View>{ArticleList}</View>
  );
};

关键细节说明 #

1. 状态管理：用Set存储已点赞商品的ID，相比数组，Set的添加/删除/查找操作都是O(1)，效率更高，也更简洁。
2. 事件冒泡处理：因为心形图标嵌套在商品的跳转TouchableOpacity里，所以需要用e.stopPropagation()阻止点击心形时触发跳转，只执行点赞逻辑。
3. 唯一标识：尽量用商品的唯一ID（比如后端返回的id）而不是索引i，因为如果商品列表有排序、新增/删除的情况，索引会变化，导致状态混乱。

这样修改后，你就可以自由点击多个心形图标，实现多点赞的功能啦～

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