异步handleClick函数报错及useMutation返回值异常问题咨询

问题1：Mutation执行后console.log输出(undefined, false, undefined) #

原因 #

调用createT09ScreenShot后立刻执行console.log，但createT09ScreenShot是异步操作，此时Mutation尚未完成，useMutation返回的data/loading/error仍为初始状态值。另外，loading仅在Mutation执行过程中短暂为true，你在调用后立即打印时，可能已跳过该阶段，但data还未完成更新。

修复方案 #

有两种方式获取Mutation执行结果：

1. await Mutation调用并直接处理返回值
   createT09ScreenShot本身返回Promise，可通过await直接拿到执行结果：

const handleClick = async () => {
  const screenshotData = await saveImage();
  if (screenshotData) {
    const { display_1, display_2 } = screenshotData;
    // await Mutation调用，获取结果
    const result = await createT09ScreenShot({
      variables: {
        screenshot_window_1: display_1,
        screenshot_window_2: display_2,
      },
    });
    console.log(result.data, result.loading, result.error);
  }
};

2. 监听useMutation返回的状态变化
   useMutation的data/loading/error是React状态，会随Mutation执行自动更新。可通过useEffect监听这些状态的变化：

const SaveLogsButton = () => {
  const [createT09ScreenShot, { loading, error, data }] = useMutation(CREATE_T09_SCREENSHOT);

  useEffect(() => {
    // 当data或error有值时打印
    if (data || error) {
      console.log(data, loading, error);
    }
  }, [data, loading, error]);

  const handleClick = async () => {
    const screenshotData = await saveImage();
    if (screenshotData) {
      const { display_1, display_2 } = screenshotData;
      createT09ScreenShot({
        variables: {
          screenshot_window_1: display_1,
          screenshot_window_2: display_2,
        },
      });
    }
  };

  // 组件渲染逻辑...
};

问题2：解构saveImage时报错TypeError: Right side of assignment cannot be destructured #

原因 #

代码const { display_1, display_2 } = saveImage;是直接解构saveImage函数本身，而非它的执行返回值。函数本身不具备可解构的display_1/display_2属性，因此触发报错。

修复方案 #

需先调用saveImage并await其返回值，再进行解构操作：

const handleClick = async () => {
  // 调用函数并等待返回结果
  const screenshotData = await saveImage();
  // 确保返回值有效后再解构
  if (screenshotData) {
    const { display_1, display_2 } = screenshotData;
    createT09ScreenShot({
      variables: {
        screenshot_window_1: display_1,
        screenshot_window_2: display_2,
      },
    });
  }
};

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