No overload matches this call.
z-com\src\app\(beforeLogin)\_component\SignupModal.tsx
파일에서 useFormState(OnSubmit, {message: null }); 해당 부분에서
Type error:No overload matches this call.
Overload 1 of 2, '(action: (state: { message: string; } | undefined) => { message: string; } | Promise<{ message: string; } | undefined> | undefined, initialState: { message: string; } | undefined, permalink?: string | undefined): [state: ...]', gave the following error.
Argument of type '(prevState: any, formData: FormData) => Promise<{ message: string; } | undefined>' is not assignable to parameter of type '(state: { message: string; } | undefined) => { message: string; } | Promise<{ message: string; } | undefined> | undefined'.
Target signature provides too few arguments. Expected 2 or more, but got 1.
Overload 2 of 2, '(action: (state: { message: string; } | undefined, payload: FormData) => { message: string; } | Promise<{ message: string; } | undefined> | undefined, initialState: { message: string; } | undefined, permalink?: string | undefined): [state: ...]', gave the following error.
Type 'null' is not assignable to type 'string'.ts(2769)
에러가 발생합니다.
제로초님 github 파일 3-2에 있는 부분을 복붙해서 하고 있는데 에러가 발생했습니다. 타이핑 에러는 아닌 것 같습니다.
찾아보니 함수에 들어오는 매개변수의 타입이 예상한 타입과 일치하지 않을 때 발생한다고 하여서
message의 type을 any로 바꿔보아도 에러가 납니다 ..
React 버전은 18버전이고 nextjs 는 14.0.4 버전입니다.
어떤 부분을 수정해야 할지 모르겠습니다...
답변 1
0
코드 보여주세요. null 관련 에러라서 string을 string | null 로 수정하면 될 것 같긴 합니다.
0
"use client";
import style from "./signup.module.css";
import onSubmit from "../_lib/signup";
import BackButton from "@/app/(beforeLogin)/_component/backbutton";
import { useFormState, useFormStatus } from "react-dom";
function showMessage(messasge: string) {
if (messasge === "no_id") {
return "아이디를 입력하세요.";
}
if (messasge === "no_name") {
return "닉네임을 입력하세요.";
}
if (messasge === "no_password") {
return "비밀번호를 입력하세요.";
}
if (messasge === "no_image") {
return "이미지를 업로드하세요.";
}
if (messasge === "user_exists") {
return "이미 사용 중인 아이디입니다.";
}
return "";
}
export default function SignupModal() {
const [state, formAction] = useFormState(onSubmit, { message: null });
const { pending } = useFormStatus();
return (
<>
<div className={style.modalBackground}>
<div className={style.modal}>
<div className={style.modalHeader}>
<BackButton />
<div>계정을 생성하세요.</div>
</div>
<form action={formAction}>
<div className={style.modalBody}>
<div className={style.inputDiv}>
<label className={style.inputLabel} htmlFor="id">
아이디
</label>
<input
id="id"
name="id"
className={style.input}
type="text"
placeholder=""
required
/>
</div>
<div className={style.inputDiv}>
<label className={style.inputLabel} htmlFor="name">
닉네임
</label>
<input
id="name"
name="name"
className={style.input}
type="text"
placeholder=""
required
/>
</div>
<div className={style.inputDiv}>
<label className={style.inputLabel} htmlFor="password">
비밀번호
</label>
<input
id="password"
name="password"
className={style.input}
type="password"
placeholder=""
required
/>
</div>
<div className={style.inputDiv}>
<label className={style.inputLabel} htmlFor="image">
프로필
</label>
<input
id="image"
name="image"
required
className={style.input}
type="file"
accept="image/*"
/>
</div>
</div>
<div className={style.modalFooter}>
<button
type="submit"
className={style.actionButton}
disabled={pending}
>
가입하기
</button>
<div className={style.error}>{showMessage(state?.message)}</div>
</div>
</form>
</div>
</div>
</>
);
}이게 /src/app/(beforeLogin)/_component/SignupModal.tsx 전체 코드입니다.
0
"use server";
import { redirect } from "next/navigation";
import { signIn } from "@/auth";
export default async (
prevState: { message: string | null },
formData: FormData
) => {
if (!formData.get("id") || !(formData.get("id") as string)?.trim()) {
return { message: "no_id" };
}
if (!formData.get("name") || !(formData.get("name") as string)?.trim()) {
return { message: "no_name" };
}
if (
!formData.get("password") ||
!(formData.get("password") as string)?.trim()
) {
return { message: "no_password" };
}
if (!formData.get("image")) {
return { message: "no_image" };
}
let shouldRedirect = false;
try {
const response = await fetch(
`${process.env.NEXT_PUBLIC_BASE_URL}/api/users`,
{
method: "post",
body: formData,
credentials: "include",
}
);
console.log(response.status);
if (response.status === 403) {
return { message: "user_exists" };
}
console.log(await response.json());
shouldRedirect = true;
await signIn("credentials", {
username: formData.get("id"),
password: formData.get("password"),
redirect: false,
});
} catch (err) {
console.error(err);
return;
}
if (shouldRedirect) {
redirect("/home"); // try/catch문 안에서 X
}
};
위의 코드는 signup.ts입니다.
path는 /src/app/(beforeLogin)/_lib/signup.ts입니다.
"클라이언트 컴포넌트에서 Server Actions 사용하기 "
제로초님이 해당 강의 4: 10초 정도에 singup.ts 파일의 6번째 줄인
export default async ( prevState: { message: string | null }, formData: FormData )
이 부분에서 prevState: { message: string | null } 이 부분을 prevState : any로 고치셨는데 SingupModal.ts 파일에서 no overload matches this call 에러가 사라졌습니다. 근데 저는 따라했는데 사라지지 않아서 질문 남깁니다.
현재는 제가 처음에 질문에 올린 에러 메세지가 다르게 뜹니다.
No overload matches this call.
Overload 1 of 2, '(action: (state: { message: string; } | undefined) => { message: string; } | Promise<{ message: string; } | undefined> | undefined, initialState: { message: string; } | undefined, permalink?: string | undefined): [state: ...]', gave the following error.
Argument of type '(prevState: { message: string | null;}, formData: FormData) => Promise<{ message: string; } | undefined>' is not assignable to parameter of type '(state: { message: string; } | undefined) => { message: string; } | Promise<{ message: string; } | undefined> | undefined'.
Target signature provides too few arguments. Expected 2 or more, but got 1.
Overload 2 of 2, '(action: (state: { message: string; } | undefined, payload: FormData) => { message: string; } | Promise<{ message: string; } | undefined> | undefined, initialState: { message: string; } | undefined, permalink?: string | undefined): [state: ...]', gave the following error.
Argument of type '(prevState: { message: string | null;}, formData: FormData) => Promise<{ message: string; } | undefined>' is not assignable to parameter of type '(state: { message: string; } | undefined, payload: FormData) => { message: string; } | Promise<{ message: string; } | undefined> | undefined'.
Types of parameters 'prevState' and 'state' are incompatible.
Type '{ message: string; } | undefined' is not assignable to type '{ message: string | null; }'.
Type 'undefined' is not assignable to type '{ message: string | null; }' .ts(2769)
이렇게 뜨고 있습니다.
캡처링부분 질문있습니다.
0
74
2
깃에 소스코드를 찾을 수 없습니다.
0
113
2
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
0
98
1
import 파일 경로를 찾지 못 해서 에러가 발생합니다.
0
109
2
css 라이브러리 추천 부탁드립니다
0
140
2
팔로우 추천 목록이 빈 배열로 들어옵니다.
0
130
1
게시물 업로드 시 userId가 undefined로 들어가는 오류
0
119
1
useSuspenseQuery 사용 시 SSR 401 이슈 관련
0
171
1
리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??
0
184
3
폴링이 필요없는 이유
0
93
2
next Request Memoization과 react cache
0
108
2
seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?
0
84
2
next.js 서버fetch 에러 fallback ui 구현 방법
0
173
2
프레임워크 여론 파악법
0
125
2
필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??
0
103
2
서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.
0
102
2
template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈
0
66
2
Auth.js 사용 시 authorize 함수가 호출되지 않습니다
0
131
2
next.js 에서 로그인에 관하여
0
138
1
Next의 route handler에 대한 질문이 있습니다.
0
101
2
게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다
0
97
2
프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.
0
85
2
vanilla-extract 못찾는 문제
0
229
2
fetch 캐싱과 revalidate 관련
0
84
2