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 个按钮可以更改状态（组），当状态更改时（useEffect）我使旧查询无效以发送新查询但问题是回调只有初始状态而不是更新状态当它被执行时，它会打印出初始状态

Answer 1

我认为你应该这样修改你的 useQuery 部分

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

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

React 函数使用过时的状态

React function uses outdated state

javascript

callback

reactjs

use-state

react-query