为何点击事件函数内的useState状态值无法获取最新值？

你遇到的是React闭包陷阱导致的问题：虽然你将点击函数放在依赖users的useEffect中，但如果旧的事件监听未被正确移除，或者DOM元素查询存在不一致，点击时触发的仍是旧的handleFollow函数——它捕获的是创建时的旧users值，因此打印出旧数据。

修复方案1：用React Ref绑定DOM元素（推荐） #

避免使用document.querySelector，改用React的useRef直接关联按钮元素，确保操作的是正确的DOM节点：

const [users, setUsers] = useState([]);
const followBtnRef = useRef(null); // 创建Ref用于绑定按钮

useEffect(() => {
  const subscribe = onSnapshot(usersRef, snap => {
    let tempUsers = [];
    snap.docs.forEach(doc => {
      tempUsers.push({ ...doc.data(), id: doc.id });
    });
    setUsers(tempUsers);
  });

  return () => subscribe();
}, []);

useEffect(() => {
  const handleFollow = async () => {
    console.log(users.find(person => person.id === 'uekUbQRcBRYiZpipQGhHUtjwNDA3'));
    console.log(users);
  };

  const btn = followBtnRef.current;
  if (btn) {
    btn.addEventListener('click', handleFollow);
    // 返回清理函数，确保移除当前绑定的监听
    return () => btn.removeEventListener('click', handleFollow);
  }
}, [users]);

// 在JSX中为按钮绑定Ref
<button ref={followBtnRef} className="follow-btn">关注</button>

修复方案2：用Ref保存最新状态 #

如果不想修改DOM绑定方式，可以用useRef实时同步users的最新值，绕过闭包限制直接访问最新数据：

const [users, setUsers] = useState([]);
const latestUsersRef = useRef([]);

// 每次users更新时，同步到Ref中
useEffect(() => {
  latestUsersRef.current = users;
}, [users]);

useEffect(() => {
  const subscribe = onSnapshot(usersRef, snap => {
    let tempUsers = [];
    snap.docs.forEach(doc => {
      tempUsers.push({ ...doc.data(), id: doc.id });
    });
    setUsers(tempUsers);
  });

  return () => subscribe();
}, []);

useEffect(() => {
  const followBtn = document.querySelector('.follow-btn');
  if (!followBtn) return;

  const handleFollow = async () => {
    // 直接从Ref中获取最新的users
    console.log(latestUsersRef.current.find(person => person.id === 'uekUbQRcBRYiZpipQGhHUtjwNDA3'));
    console.log(latestUsersRef.current);
  };

  followBtn.addEventListener('click', handleFollow);
  return () => followBtn.removeEventListener('click', handleFollow);
}, []); // 此处无需依赖users

原代码问题解析 #

你之前的代码中，每次users更新时会重新执行第二个useEffect，但document.querySelector('.follow-btn')可能在组件重新渲染后拿到新的DOM元素，导致旧元素的监听未被正确移除；或者查询到的元素为null，导致监听绑定/清理失效。最终点击时触发的是旧的handleFollow函数，打印出旧的users值。

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