开发者问题收集

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

2023-10-16
1467
javascript reactjs next.js navigation

页面在表单提交时重定向，而不转到 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: navigator is not defined at webpack_require (/Users/krushanumohapatra/www/others/my_next_issue_tracker/.next/server/webpack-runtime.js:33:43) at webpack_require (/Users/krushanumohapatra/www/others/my_next_issue_tracker/.next/server/webpack-runtime.js:33:43) at webpack_require (/Users/krushanumohapatra/www/others/my_next_issue_tracker/.next/server/webpack-runtime.js:33:43) at eval (./app/issues/new/page.tsx:9:80) at (ssr)/./app/issues/new/page.tsx (/Users/krushanumohapatra/www/others/my_next_issue_tracker/.next/server/app/issues/new/page.js:272:1) at webpack_require (/Users/krushanumohapatra/www/others/my_next_issue_tracker/.next/server/webpack-runtime.js:33:43) at JSON.parse () null

3个回答

您可以通过用以下代码片段替换 SimpleMDE 的现有导入语句 ( import SimpleMDE from "react-simplemde-editor"; ) 来修复此问题： 

import dynamic from 'next/dynamic'
const SimpleMDE = dynamic(() => import('react-simplemde-editor'), { ssr: false })

此代码更改利用 Next.js 的动态导入来确保 react-simplemde-editor 组件不包含在服务器端（SSR：服务器端渲染），而仅包含在客户端。这在组件与服务器端渲染不兼容的情况下很重要。

Sachin Lakshan
2023-10-26

您刚刚参加了 Mosh Hemdani 的 Next.js 课程（实践部分）。我刚刚遇到了您提到的相同问题，并搜索了解决方案，但显然，您的问题是我找到的唯一结果。现在我不完全确定为什么会发生这种情况，因为我的代码看起来与他的和您的完全一样 - 并且对他来说，它按预期和应该的方式工作。也许是因为他使用的是旧版本的 Next.js 13 - 而（我假设您也是）我使用的是最新版本。无论如何。这是我解决问题的方法： 

<form
    className="space-y-3"
    onSubmit={handleSubmit(async (data) => {
        try {
            const response = await fetch("/api/issues", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(data),
            });
            if (!response.ok) throw new Error();
            router.push("/issues");
        } catch (error) {
            setError("An unexpected error occurred.");
        }
    })}
>

ok 状态表示不同请求的不同代码。对于 GET，200 确实是 ok 状态代码，但对于 DELETE，例如，204 将是 ok ，而对于 POST（我们在这里感兴趣的）201 是 ok 状态代码（已创建）。您可以在 此处 阅读有关此内容的更多信息。

因此，我只是在 API 返回 JSON 响应后检查状态代码（无论是 ok 还是不是），然后，如果状态不是 ok ，我将手动抛出一个错误（空），它将触发 try-catch 块的 catch 部分。不过，我不太清楚 Mosh 示例中的错误是如何触发的 :))

L.E.：我没有使用 axios 进行测试，因为我选择使用 fetch ，但我猜是同一个想法。

L.L.E.：我刚刚使用 axios 进行了测试，显然不需要检查 ok 状态。如果状态不是 ok ，axios 似乎已经在此过程中抛出错误。不过，我会坚持使用 fetch :P

Eva Bucur
2023-10-18

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

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

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

Fabio Nettis
2023-10-16