React中map遍历对象数组时useRef获取点击元素ID异常问题

你遇到的核心问题是：单个useRef在map循环里会被所有元素共享。因为useRef的引用是持久化的，循环遍历渲染帖子时，每个帖子都会覆盖同一个ref.current的值，最终ref只会保存最后一个（或最后被更新的）帖子元素的ID，所以点击任何按钮拿到的都是同一个ID。

1. 直接传递帖子ID（最推荐，完全绕开ref问题） #

你本来就有从数据库拿到的帖子对象，直接把post.id作为参数传给点击事件函数就行，根本不需要从DOM里获取ID：

{posts.map(post => (
  <div key={post.id}>
    <h3>{post.title}</h3>
    <button onClick={() => handleDelete(post.id)}>删除</button>
    <button onClick={() => handleLike(post.id)}>点赞</button>
  </div>
))}

对应的事件处理函数直接使用传入的ID拼接请求URL：

const handleDelete = async (postId) => {
  try {
    await fetch(`/api/posts/${postId}`, {
      method: 'DELETE'
    });
    // 请求成功后更新帖子列表状态
    setPosts(posts.filter(p => p.id !== postId));
  } catch (err) {
    console.error('删除失败:', err);
  }
};

const handleLike = async (postId) => {
  const res = await fetch(`/api/posts/${postId}/like`, {
    method: 'POST'
  });
  const updatedPost = await res.json();
  // 更新对应帖子的点赞状态
  setPosts(posts.map(p => p.id === postId ? updatedPost : p));
};

2. 给每个帖子创建独立的ref（仅特殊场景需要） #

如果确实需要操作帖子的DOM元素（比如滚动到指定帖子），可以用useRef创建一个对象/数组来存储每个帖子的独立引用：

const postRefs = useRef({});

// 渲染时为每个帖子绑定专属ref
{posts.map(post => (
  <div 
    key={post.id} 
    ref={el => postRefs.current[post.id] = el}
  >
    <h3>{post.title}</h3>
    <button onClick={() => handleEdit(post.id)}>编辑</button>
  </div>
))}

后续需要操作DOM时，通过post.id从postRefs中获取对应元素：

const handleEdit = (postId) => {
  const targetPostEl = postRefs.current[postId];
  // 比如聚焦到编辑输入框
  targetPostEl.querySelector('.edit-input').focus();
  // 同时使用postId发请求
  fetch(`/api/posts/${postId}`);
};

map遍历渲染列表时，一定要给每个元素加唯一的key（比如post.id），这是React识别列表元素身份的关键，避免不必要的渲染异常。

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