React Native帖子点赞UI异常：点击单帖触发全帖状态变更

核心问题是所有帖子复用了同一个点赞状态变量，没有根据帖子的唯一标识（比如_id）区分不同帖子的点赞状态，导致点击任意一个帖子的点赞按钮时，全局状态变化会让所有帖子同步切换点赞UI。

1. 调整状态存储结构 #

将单个布尔值状态改为以帖子ID为键的对象，单独维护每个帖子的点赞状态：

// 初始化空对象，存储{ 帖子ID: 是否点赞 }的键值对
const [likedPosts, setLikedPosts] = useState({});

2. 修改点赞请求函数 #

点击点赞时，仅更新当前点击帖子的状态，而非全局状态：

const likePost = async (postId) => {
  try {
    // 调用后端点赞接口
    const response = await fetch(`/api/posts/${postId}/like`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
    });
    await response.json();

    // 切换当前帖子的点赞状态
    setLikedPosts(prevState => ({
      ...prevState,
      [postId]: !prevState[postId] // 若之前未点赞则设为true，反之设为false
    }));
  } catch (error) {
    console.error('点赞操作失败:', error);
  }
};

3. 修正帖子渲染逻辑 #

渲染每个帖子时，根据当前帖子ID从likedPosts中获取对应的点赞状态，而非使用全局状态：

{posts.map(post => {
  // 判断当前帖子是否已点赞，默认未点赞
  const isLiked = likedPosts[post._id] || false;

  return (
    <View key={post._id} style={styles.postItem}>
      {/* 帖子其他内容（标题、正文等） */}
      
      {/* 点赞按钮 */}
      <TouchableOpacity 
        onPress={() => likePost(post._id)}
        style={styles.likeBtn}
      >
        {/* 根据isLiked切换图标样式 */}
        <Icon 
          name={isLiked ? 'heart' : 'heart-o'}
          size={22}
          color={isLiked ? '#ff3b30' : '#8e8e93'}
        />
        <Text style={styles.likeCount}>{post.likes.length}</Text>
      </TouchableOpacity>
    </View>
  );
})}

4. 初始化已点赞状态（可选） #

如果需要页面加载时就显示用户已点赞的帖子状态，可在组件挂载时请求后端获取用户点赞记录，初始化likedPosts：

useEffect(() => {
  const fetchUserLikedPosts = async () => {
    try {
      const response = await fetch('/api/users/me/liked-posts');
      const likedPostIds = await response.json();
      
      // 将已点赞ID数组转为{ID: true}的对象
      const initialLikedState = likedPostIds.reduce((acc, postId) => {
        acc[postId] = true;
        return acc;
      }, {});
      
      setLikedPosts(initialLikedState);
    } catch (error) {
      console.error('获取已点赞帖子列表失败:', error);
    }
  };

  fetchUserLikedPosts();
}, []);

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