ReferenceError：Next.js 中未定义 FileReader

Question

我正在尝试使用该/app文件夹的 Next.js 13 的新功能，但在处理输入表单的简单客户端组件中，我尝试使用FileReader但在浏览时收到错误。

这是代码的摘要：

"use client";
import React, { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import useStore from "../app/store";

export default function FileUploader() {
  const [files, setFiles] = useState([]);
  const router = useRouter();
  const addFile = useStore((state) => state.addFile);

  const fileReader = new FileReader();

  const onFileSelect = (event) => {
    event.preventDefault();
    setFiles(event.target.files);
    console.log(event.target.files);
  };

  useEffect(() => {
    if (files[0] == null) return;
    let FileToString = fileReader.readAsText(files[0]); // get error at this line
    addFile(FileToString);

    router.push("/file/" + filename);
  }, [files]);

  return (
    <input
      id="dropzone-file"
      type="file"
      className="fileInput"
      onChange={onFileSelect}
    />
  );
}

错误：

wait  - compiling...
event - compiled client and server successfully in 3.4s (758 modules)
ReferenceError: FileReader is not defined
    at FileUploader (webpack-internal:///(sc_client)/./components/FileUploader.js:27:24)
    ...

我究竟做错了什么？

Answer 1

与访问 一样window，Next.js 中任何特定于浏览器的代码都需要在客户端上运行。如果您想使用FileReader，它是浏览器 API 的一部分，请将其添加到您的useEffect，如下所示：

useEffect(() => {
  const fileReader = new FileReader();
  // ...
}, [files]);

这样，Next.jsFileReader在服务器上渲染组件时就不会查找 a 的定义。是的，即使是客户端组件也会首先在服务器上渲染，然后在浏览器上进行水合。