RTK useLazyQuery触发后onClick中数据未刷新问题求助

你遇到的问题核心是：trigger()是异步操作，调用它之后并不会立刻更新result——组件要等到请求状态变化（比如进入加载态、请求成功）才会重新渲染，此时result才会更新。所以你在trigger()后立刻console.log(result)，拿到的还是组件当前渲染周期里的初始值。

下面是三种可行的解决方式：

方法1：利用trigger返回的Promise #

useLazyQuery的trigger函数会返回一个Promise，请求成功后会resolve出查询结果，你可以直接用异步语法处理：

const ComponentA = (props) => {
  const [trigger, result] = useLazyQuery(); 

  const onClickHandler = async () => {
    try {
      const response = await trigger();
      console.log('查询结果:', response);
      // 在这里直接处理返回的数据
    } catch (error) {
      console.error('请求失败:', error);
    }
  };

  return (
    <button onClick={onClickHandler}>Button</button>
  )
}

方法2：用useEffect监听result的状态变化 #

通过useEffect监听result的变化，当请求成功或失败时触发对应逻辑：

import { useEffect } from 'react';

const ComponentA = (props) => {
  const [trigger, result] = useLazyQuery(); 

  const onClickHandler = () => {
    trigger();
  };

  useEffect(() => {
    if (result.isSuccess) {
      console.log('查询结果:', result.data);
      // 处理成功返回的数据
    }
    if (result.isError) {
      console.error('请求出错:', result.error);
    }
  }, [result]);

  return (
    <button onClick={onClickHandler}>Button</button>
  )
}

方法3：在组件渲染阶段直接处理 #

如果是要在页面上展示数据或做渲染相关处理，可以直接在JSX里根据result的状态判断：

const ComponentA = (props) => {
  const [trigger, result] = useLazyQuery(); 

  const onClickHandler = () => {
    trigger();
  };

  return (
    <div>
      <button onClick={onClickHandler}>Button</button>
      {result.isLoading && <p>加载中...</p>}
      {result.isSuccess && <p>查询结果: {JSON.stringify(result.data)}</p>}
      {result.isError && <p>请求失败: {result.error.message}</p>}
    </div>
  )
}

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