React post.map渲染列表时单帖点赞触发所有按钮加载问题

• 加载状态定义逻辑错误：你将likeHandling作为帖子列表父组件的单一布尔状态使用，所有帖子的点赞按钮都共用这一个状态值。触发任意帖子的点赞操作时，该状态被设为true，所有帖子的按钮判断逻辑同时命中，就会同步进入加载态、被禁用。
• 状态未和单条帖子绑定：单一布尔值只能标记「是否有请求在进行」，无法标记「具体是哪条帖子的请求在进行」，自然无法仅给操作项显示加载效果。
• 附带语法问题：代码中存在<button>嵌套<button>的写法，不符合HTML规范，会导致事件冒泡异常、交互行为不符合预期。

核心思路：将单一布尔加载状态，替换为存储当前正在操作的帖子ID的状态，只有按钮所属帖子ID与状态中存储的ID匹配时，才展示加载态。

1. 状态定义修改 #

// 移除原单一布尔加载状态，改为存储当前操作的帖子ID，无操作时为null
const [handlingPostId, setHandlingPostId] = useState(null);
const [posts, setPosts] = useState([]);

2. 点赞请求逻辑修改 #

const likePost = async (post_id, user_id) => {
  try {
    setHandlingPostId(post_id); // 标记当前正在操作的帖子ID
    const res = await axiosjwt.post(`${BASE_API_URL}/likehandle`, {
      post_id,
    });
    // 用函数式更新避免闭包拿到旧的posts值
    setPosts(prevPosts => prevPosts.map((post) => {
      if (post._id === res.data._id) {
        return res.data;
      }
      return post;
    }));
  } catch (err) {
    console.log(err);
  } finally {
    // 不管请求成功失败，都重置加载状态
    setHandlingPostId(null);
  }
};

3. 按钮渲染逻辑修改 #

移除内层嵌套的多余<button>标签，将所有加载态判断替换为「当前帖子ID是否等于handlingPostId」：

<button
  disabled={handlingPostId === post._id}
  className="inline-flex justify-center items-center w-full hover:bg-gray-100 py-1"
  onClick={() => likePost(post._id, user.User._id)}
>
  <span className="mr-2">
    {post.likes.includes(user.User._id.toString()) ? (
      <AiFillLike
        className={
          handlingPostId === post._id
            ? "w-6 h-6 text-blue-500 animate-bounce"
            : "w-6 h-6 text-blue-500"
        }
      />
    ) : (
      <AiOutlineLike
        className={
          handlingPostId === post._id
            ? "w-6 h-6 text-gray-700 animate-bounce"
            : "w-6 h-6 text-gray-700"
        }
      />
    )}
  </span>
  <span className="text-md font-bold">
    {post?.likes ? post.likes.length : 1} Likes
  </span>
</button>

• 加载状态扩展：如果要同时支持点赞、点踩的加载态区分，可以把状态结构改成对象形式，比如const [handling, setHandling] = useState({ postId: null, type: null })，存储操作的帖子ID和操作类型（like/dislike），即可同时区分不同操作的加载状态，不需要新增多个独立状态。
• 乐观更新优化：点击点赞时不用等接口返回，先本地更新对应帖子的点赞状态、点赞数，等接口请求失败时再回滚状态，大幅提升交互流畅度。
• 防重复点击：除了加载态禁用按钮，还可以给点赞操作加300ms防抖，避免用户快速点击触发重复请求。
• 状态拆分：将帖子列表拉取的loading状态和点赞操作的loading状态完全拆分，避免不同场景的加载态互相干扰。

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