如何将React服务器组件转为客户端组件？解决useState/useEffect报错

问题原因 #

你的组件被Next.js默认识别为服务器组件，而服务器组件无法使用useState、useEffect这类客户端专属的React钩子，也不能直接操作DOM，因此触发了报错。

修复步骤 #

1. 标记为客户端组件：在文件最顶部（所有代码之前）添加"use client"指令，这是Next.js区分客户端/服务器组件的关键标识。
2. 补全useState导入：原代码里使用了useState但未在import语句中声明，需要补上。

修改后的完整代码 #

"use client";
import React, { useState, useEffect } from 'react';

const RandomCodeGenerator = () => {
  const [randomCode, setRandomCode] = useState('');
  const [isDownloadVisible, setDownloadVisible] = useState(false);

  // 生成随机码
  const generateRandomCode = () => {
    const code = Math.random().toString(36).substr(2, 15); // 可自定义长度
    setRandomCode(code);
    setDownloadVisible(true);
  };

  // 下载文件
  const downloadFile = (e: React.MouseEvent<HTMLAnchorElement>) => {
    e.preventDefault(); // 阻止a标签默认跳转行为
    const element = document.createElement('a');
    element.href = `data:text/plain;charset=utf-8,${encodeURIComponent(randomCode)}`;
    element.download = 'random_code.txt';
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
  };

  // 组件挂载后自动生成一次随机码
  useEffect(() => {
    generateRandomCode();
  }, []);

  return (
    <div className="bg-gray-200 p-8">
      <h1 className="text-3xl mb-6">生成随机折扣码</h1>
      <div className="bg-white p-4 rounded-md shadow-md mb-6">{`Code: ${randomCode}`}</div>
      <button
        id="generateRandomCode"
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mr-4"
        onClick={generateRandomCode}
      >
        生成随机码
      </button>
      {isDownloadVisible && (
        <a
          id="downloadLink"
          href="#"
          className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
          onClick={downloadFile}
        >
          下载码
        </a>
      )}
    </div>
  );
};

export default RandomCodeGenerator;

额外优化：给downloadFile函数添加了事件对象类型声明，并调用e.preventDefault()阻止a标签默认跳转行为，避免不必要的页面刷新。

原错误信息 #

─[C:\Users\35797\Desktop\qrwebsite\qrwebsite\components\RandomCodeGenerator.tsx:1:1]
 1 │ import React, {  useEffect } from 'react';
   ·                  ─────────
 2 │
 3 │ const RandomCodeGenerator = () => {
 3 │   const [randomCode, setRandomCode] = useState('');
   ╰────

Maybe one of these should be marked as a client entry with "use client":
  ./components\RandomCodeGenerator.tsx
  ./app\page.tsx**

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