React Query：如何在数据加载完成时触发Toast提示？

你的问题出在当前代码仅监听isSuccess状态，但未确保数据实际可用（或缺少必要的更新判断逻辑），导致Toast弹出时没有有效内容。可以按以下方式修改：

修改后的代码 #

function useAppNeedsAnUpdate() {
  const versionControl = useVersionControlQuery();

  useEffect(() => {
    // 确保请求成功、数据存在，且确实需要更新时再弹出Toast
    if (versionControl.isSuccess && versionControl.data) {
      // 可选：添加版本对比逻辑，判断当前应用是否需要更新
      // 示例：假设接口返回版本字段为version，当前版本是normalisedAppVersion
      // const needUpdate = normalisedAppVersion < versionControl.data.version;
      // if (needUpdate) {
        Toast.show({
          text1: versionControl.data.header,
          text2: versionControl.data.body,
          type: 'appUpdate',
          autoHide: false,
          props: {
            link: versionControl.data.storeLink,
          },
        });
      // }
    }
  }, [versionControl.isSuccess, versionControl.data]);
}

export default useAppNeedsAnUpdate;

关键修改说明 #

• 补充依赖项：将versionControl.data加入useEffect的依赖数组，确保只有当数据实际更新时才触发逻辑，避免isSuccess重复触发导致的无效Toast。
• 显式校验数据：虽然React Query的isSuccess状态意味着data已就绪，但显式判断versionControl.data可以规避后端返回空数据的极端情况。
• 版本对比逻辑（推荐添加）：如果接口返回了版本号，增加版本对比判断，只有当当前应用版本低于服务器版本时才弹出更新提示，避免每次请求成功都显示Toast。

另外，请确认getVersionControl请求函数确实返回了包含header、body、storeLink的有效数据，否则即使请求成功，Toast仍会显示空内容。

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