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

nbysray5  于 12个月前  发布在  React
关注(0)|答案(1)|浏览(97)

在提交表单时重定向页面,而不转到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/codemonitor/lib/codemonitor.js(18:0)@eval错误ReferenceError:导航器未在webpack_require(/Users/krushanumohapatra/www/others/my_next_issue_tracker/. next/server/webpack-runtime. js:三十三:43)atwebpack_require(/Users/krushanumohapatra/www/others/my_next_issue_tracker/. next/server/webpack-runtime. js:三十三:43)atwebpack_require(/Users/krushanumohapatra/www/others/my_next_issue_tracker/. next/server/webpack-runtime. js:三十三:43)在eval(./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:二百七十二:1)在webpack_require(/Users/krushanumohapatra/www/others/my_next_issue_tracker/. next/server/webpack-runtime. js:三十三:43. JSON。parse()null

23c0lvtd

23c0lvtd1#

在我看来,你遇到的问题是调用组件返回节内的函数的副作用。将下面的代码行修改为:

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

我猜你遇到的navigator is not defined错误只是渲染循环的副产品。

相关问题