如何将RTK Query请求返回的数据赋值给useState初始化的变量

你可以通过两种方式实现将请求返回的数据赋值给useState定义的data变量：

方法一：直接await请求结果并赋值 #

RTK Query的mutation函数调用后会返回一个Promise，你可以用await结合.unwrap()获取请求成功的数据，直接调用setData完成赋值：

修改你的getData函数即可：

const getData = async() => {
  if (!organization?.name) return;
  try {
    // 调用mutation并通过unwrap获取成功响应数据
    const responseData = await updateCoverage({ 
      organizationName: organization.name, 
      updateCoverageRequest: dashboardFilter 
    }).unwrap();
    // 赋值给useState变量
    setData(responseData);
  } catch (error) {
    // 按需处理请求失败的情况
    console.error('更新Coverage失败:', error);
  }
}

.unwrap()的作用是：请求成功时直接返回响应数据；请求失败时会抛出错误，方便用try/catch捕获处理。

方法二：监听mutation状态变化自动赋值 #

你已经从useUpdateCoverageMutation解构出了coverageData和isSuccess状态，可通过useEffect监听这些状态的变化，当请求成功时自动赋值：

const { dashboardFilter, organization } = useStateContext();
const [data, setData] = useState<DiligenceDTo[]>();

const [updateCoverage, { data: coverageData, isLoading, isSuccess, isError}] = useUpdateCoverageMutation();

const getData = async() => {
  await updateCoverage({ 
    organizationName: organization?.name, 
    updateCoverageRequest: dashboardFilter 
  });
}

useEffect(() => {
  if (!organization?.name) return;
  getData();
}, [dashboardFilter, organization]);

// 添加这个useEffect监听请求成功状态
useEffect(() => {
  // 当请求成功且有返回数据时，赋值给useState变量
  if (isSuccess && coverageData) {
    setData(coverageData);
  }
}, [isSuccess, coverageData, setData]);

这种方式适合需要根据请求状态（成功/失败）做后续处理的场景，当isSuccess变为true且coverageData存在时，自动更新data变量。

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