next.js 无法读取undefined的属性(正在阅读'headers')

ig9co6j1  于 2023-08-04  发布在  其他
关注(0)|答案(1)|浏览(147)

我创建了一个注册页面,我也连接到mongodb数据库,当我尝试单击该注册按钮时,它在控制台中抛出了一个名为(signup failed Request failed with status code 500)的错误,但在终端中显示了错误调用此(error TypeError:无法在eval(webpack-internal:/(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:265:61)at process.processTicksAndRejections(node:internal/process/task_queues:95:5)读取undefined的属性(正在阅读'headers')
这是注册页面的第,ts页

"use client"

import React, { useEffect} from "react";
import Link from "next/link";
import axios from "axios"
import { useRouter } from "next/navigation";
const SignUpPage = () => {
  const router= useRouter();
  const [user, setUser]=React.useState({
    username:"",
    email:"",
    password:"",
  })
  const [buttonDisabaled, setButtonDisabaled]=React.useState(false)
  const [loading, setLoading]= React.useState(false)

  const onSignUp= async()=>{
     try {
       setLoading(true);
       const response= await axios.post("/api/users/signup", user);
       console.log("signup Successfully", response.data);
       router.push("/login");
       
     } catch (error:any) {
        console.log("signup failed", error.message)
     }finally{
      setLoading(false)
     }
  }

  useEffect(()=>{
     if(user.username.length > 0 &&
        user.email.length > 0 &&
        user.password.length > 0 
      ){
        setButtonDisabaled(false)
      }else{
        setButtonDisabaled(true)
      }
  },[user])
  return (
    <div>
      <section className="gradient-form h-full bg-neutral-200 dark:bg-neutral-700">
        <div className="container h-full p-10">
          <div className="g-7 flex h-full flex-wrap items-center justify-center text-neutral-800 dark:text-neutral-200">
            <div className="w-full">
              <div className="block rounded-lg bg-white shadow-lg dark:bg-neutral-800">
                <div className="g-0 lg:flex lg:flex-wrap">
                  {/* Left column container*/}
                  <div className="px-4 md:px-0 lg:w-6/12">
                    <div className="md:mx-6 md:p-12">
                      {/*Logo*/}
                      <div className="text-center">
                        <img
                          className="mx-auto w-48"
                          src="https://tecdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/lotus.webp"
                          alt="logo"
                        />
                        <h4 className="mb-12 mt-1 pb-1 text-xl font-semibold">
                          we are developers Team
                        </h4>
                      </div>
                      <p className="mb-4">Sign Up</p>

                      {/*Username input*/}
                      <div className="relative mb-4" data-te-input-wrapper-init>
                      <h4 className="mb-12 mt-1 pb-1 text-xl font-semibold">
                        {loading?"processing" :""}
                        </h4>
                      <label htmlFor="usermane"> Username</label>
                        <input
                        id="username"
                          type="text"
                          className="peer block min-h-[auto] w-full rounded border-0 bg-white px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none text-black [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
                          placeholder="Username"
                          value={user.username}
                           onChange={(e)=>setUser({...user, username:e.target.value})}
                           />
                       
                      </div>

                      {/*email input*/}
                      <div className="relative mb-4" data-te-input-wrapper-init>
                      <label htmlFor="email">Email</label>
                        <input
                         id="email"
                          type="email"
                          className="peer block min-h-[auto] w-full rounded border-0 bg-white px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none text-black [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
                          placeholder="email"
                          value={user.email}
                          onChange={(e)=>setUser({...user, email:e.target.value})}
                        />
                      </div>

                      {/*password input */}
                      <div className="relative mb-4" data-te-input-wrapper-init>
                      <label htmlFor="email">Email</label>
                        <input
                        id="password"
                          type="password"
                          className="peer block min-h-[auto] w-full rounded border-0 bg-white px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none text-black [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
                          placeholder="Password"
                          value={user.password}
                          onChange={(e)=>setUser({...user, password:e.target.value})}
                        />
                    
                      </div>

                      {/*Submit button*/}
                      <div className="mb-12 pb-1 pt-1 text-center">
                        <button
                           onClick={onSignUp}
                          className="mb-3 inline-block w-full rounded px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_rgba(0,0,0,0.2)] transition duration-150 ease-in-out hover:shadow-[0_8px_9px_-4px_rgba(0,0,0,0.1),0_4px_18px_0_rgba(0,0,0,0.2)] focus:shadow-[0_8px_9px_-4px_rgba(0,0,0,0.1),0_4px_18px_0_rgba(0,0,0,0.2)] focus:outline-none focus:ring-0 active:shadow-[0_8px_9px_-4px_rgba(0,0,0,0.1),0_4px_18px_0_rgba(0,0,0,0.2)]"
                          data-te-ripple-init
                          data-te-ripple-color="light"
                          style={{
                            background:
                              "linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593)",
                          }}
                        >
                         {buttonDisabaled ?"No SignUp" :"Sign Up"}
                        </button>
                        <Link href="/login">
                        <span
                           className="mb-3 inline-block w-full rounded px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_rgba(0,0,0,0.2)] transition duration-150 ease-in-out hover:shadow-[0_8px_9px_-4px_rgba(0,0,0,0.1),0_4px_18px_0_rgba(0,0,0,0.2)] focus:shadow-[0_8px_9px_-4px_rgba(0,0,0,0.1),0_4px_18px_0_rgba(0,0,0,0.2)] focus:outline-none focus:ring-0 active:shadow-[0_8px_9px_-4px_rgba(0,0,0,0.1),0_4px_18px_0_rgba(0,0,0,0.2)]"
                           data-te-ripple-init
                           data-te-ripple-color="light"
                           style={{
                             background:
                               "linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593)",
                           }}
                        >
                          Visit to Login
                        </span>
                        </Link>
                      </div>
                    </div>
                  </div>
                
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default SignUpPage;

字符集
这是注册的route.ts页面

import { connect } from "@/dbConfig/dbConfig"
import User from "@/models/userModels"
import { NextRequest, NextResponse } from "next/server"
import bcryptjs from "bcryptjs"

connect()

export async function POST(request:NextRequest){
    try {
        const reqBody= await request.json();
        const {username, email, password}=reqBody;
        console.log(reqBody);

        //check is user Already exist or not 
         const user = await User.findOne({email});
         if(user){
            return NextResponse.json({error:"user Already Exists"})
         }

         //hashed password
         const saltRounds= 10;
         const salt=await bcryptjs.genSalt(saltRounds);
         const hashedPassword= await bcryptjs.hash(password,salt);

         const newUser= new User({
            username,
            email,
            password:hashedPassword
         });
         const savedUser= await newUser.save();
         console.log(savedUser)

         
    } catch (error:any) {
            console.error("Error during signup:", error);
            return NextResponse.json({ error: error.message }, { status: 500 });
    }
}

mgdq6dx1

mgdq6dx11#

我也为这个问题困扰了很长时间。但是我在从NextJs 13中的POST方法返回时解决了这个问题。before
after

相关问题