React功能使用过时的状态

Question

我正在使用 react-query 根据当前状态获取外部数据，此处是代码的方式看起来

const Home = () => {
  const queryClient = useQueryClient();
  const [group, setGroup] = useState(1);

  const query = useQuery('/query', async () => {
    console.log(group);

    return axios.get('/query', { params: { group } });
  });

  useEffect(() => {
    queryClient.invalidateQueries('/query');
  }, [group, queryClient]);

  return (
    <div>
      <button onClick={() => setGroup(1)}>First group</button>
      <button onClick={() => setGroup(2)}>Second group</button>
    </div>
  );
};

有2个按钮可以更改状态（组），并且当状态更改（使用效果）时，我无效旧查询以发送新查询执行它打印出初始状态

Answer 1

我认为您应该以这种方式修改您的usequery部分

const query = useQuery(['/query', group], async () => {
    console.log(group);

    return axios.get('/query', { params: { group } });
  });