Next.js中如何在"use client"文件的事件处理器内使用async/await？

你遇到的问题并非"use client"与async/await冲突，而是代码中存在未定义变量、缺失依赖、语法错误等问题，以下是具体修复方案：

1. 补全缺失的状态变量 #

代码中调用了setCompressedFile但未声明对应的状态，需添加：

const [compressedFile, setCompressedFile] = useState(null);

2. 导入/定义缺失的依赖项 #

• navigate需从Next.js的next/navigation导入（App Router）；
• createCarousel要确保是已导入的GraphQL突变函数；
• secret需正确定义或导入，避免未定义错误；
• Compressor需安装并导入（比如import Compressor from 'compressorjs'）。

3. 完善错误处理逻辑 #

在catch块中重置uploading状态，避免上传失败后按钮一直处于禁用状态：

catch (error) {
  console.log("Error uploading file: ", error);
  setUploading(false); // 新增这行
}

4. 修复JSX语法错误 #

按钮标签未闭合，需补充显示文本：

<button disabled={uploading} onClick={handleUploadClick}>
  {uploading ? '上传中...' : '上传图片'}
</button>

修复后的完整代码 #

"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import Compressor from "compressorjs";
// 假设createCarousel是导入的GraphQL函数
import { createCarousel } from "@/graphql/mutations";
// 假设secret是导入的配置
import { secret } from "@/config";

const CarouselSectionPage = () => {
  const [file, setFile] = useState(null);
  const [compressedFile, setCompressedFile] = useState(null);
  const [uploading, setUploading] = useState(false);
  const { push: navigate } = useRouter();

  const handleFileChange = (e) => {
    if (e.target.files?.[0]) {
      const image = e.target.files[0];
      new Compressor(image, {
        quality: 0.6,
        success: (compressedResult) => {
          setCompressedFile(compressedResult);
          setFile(compressedResult);
        },
        error: (err) => {
          console.error("压缩图片失败:", err);
        },
      });
    }
  };

  const handleUploadClick = async () => {
    if (!compressedFile) {
      alert("请先选择图片");
      return;
    }
    try {
      setUploading(true);
      await createCarousel({
        variables: {
          input: {
            image: {
              bucket: "testbucket",
              key: secret.key,
              region: "us-1",
            },
          },
        },
      });
      setUploading(false);
      setTimeout(() => {
        navigate("/"); // 建议使用具体路由，而非刷新页面
      }, 2000);
    } catch (error) {
      console.log("Error uploading file: ", error);
      setUploading(false);
    }
  };

  return (
    <div>
      <input
        type="file"
        id="images"
        accept="image/*"
        onChange={handleFileChange}
        required
        style={{ display: "none" }}
      />
      <label htmlFor="images" style={{ cursor: "pointer", marginRight: "10px" }}>
        选择图片
      </label>
      <button disabled={uploading} onClick={handleUploadClick}>
        {uploading ? "上传中..." : "上传图片"}
      </button>
    </div>
  );
};

export default CarouselSectionPage;

关键说明 #

• async/await在Client组件事件处理器中完全合法：React允许事件回调为async函数，原始错误是由未定义变量导致，而非async/await本身；
• 无需绑定useEffect：事件处理器（如点击事件）是触发异步操作的合适场景，useEffect用于处理组件生命周期或依赖变化，无需强行集成；
• 状态管理注意事项：异步操作前后需正确更新loading状态，错误分支也要重置状态，保证UI交互的合理性。

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