下一个/导航给出错误：导航器未定义

Question

页面在表单提交时重定向，而不转到 catch 块。但是，在后端，我收到以下错误：API 主体未执行。

这是页面代码。

"use client";
import { Button, TextField } from "@radix-ui/themes";
import SimpleMDE from "react-simplemde-editor";
import "easymde/dist/easymde.min.css";
import { useForm, Controller } from "react-hook-form";
import axios from "axios";
import { useRouter } from "next/navigation";

interface IssueInterface {
  title: string;
  description: string;
}

const NewIssue = () => {
  const router = useRouter();
  const { register, control, handleSubmit } = useForm<IssueInterface>();
  return (
    <form
      className=" max-w-xl space-y-3"
      onSubmit={handleSubmit(async (data) => {
        try {
          await axios.post("/issues/new", data);
          router.push("/issues");
        } catch (error) {
          console.log(error);
        }
      })}
    >
      <TextField.Root>
        <TextField.Input placeholder="Title" {...register("title")} />
      </TextField.Root>
      <Controller
        name="description"
        control={control}
        render={({ field }) => (
          <SimpleMDE placeholder="Description" {...field} />
        )}
      />
      <Button>Create Issue</Button>
    </form>
  );
};

export default NewIssue;

终端错误

⨯node_modules/codemirror/lib/codemirror.js (18:0) @ eval ⨯ ReferenceError：导航器未定义 在 webpack_require （/Users/krushanumohapatra/www/others/my_next_issue_tracker/.next/server/webpack-runtime.js:33:43） 在 webpack_require （/Users/krushanumohapatra/www/others/my_next_issue_tracker/.next/server/webpack-runtime.js:33:43） 在 webpack_require （/Users/krushanumohapatra/www/others/my_next_issue_tracker/.next/server/webpack-runtime.js:33:43） 在评估（./app/issues/new/page.tsx:9:80） 在（ssr）/./app/issues/new/page.tsx（/Users/krushanumohapatra/www/others/my_next_issue_tracker/.next/server/app/issues/new/page.js:272:1） 在 webpack_require （/Users/krushanumohapatra/www/others/my_next_issue_tracker/.next/server/webpack-runtime.js:33:43） 在 JSON.parse() 空

Answer 1

在我看来，您遇到的问题是调用组件返回部分内的函数所产生的副作用。将以下行更改为如下所示：

onSubmit={() => {
  handleSubmit(async (data) => {
    try {
      await axios.post("/issues/new", data);
      router.push("/issues");
    } catch (error) {
      console.log(error);
    }
  });
}};

我猜您遇到的

navigator is not defined

错误只是渲染循环的副产品。