인프런 커뮤니티 질문&답변

위와같이 빨간색 줄이 발생하고있습니다.

화면은 정상출력되구요.

설정문제일까요?

에러 상세

이 호출과 일치하는 오버로드가 없습니다.
오버로드 1/5('(reducer: ReducerWithoutAction<any>, initializerArg: any, initializer?: undefined): [any, DispatchWithoutAction]')에서 다음 오류가 발생했습니다.
'(state: Todo[], action: Action) => ({ in: number; content: string; } | Todo)[]' 형식의 인수는 'ReducerWithoutAction<any>' 형식의 매개 변수에 할당될 수 없습니다.
대상 서명이 너무 적은 인수를 제공합니다. 2 이상이 필요하지만 1을(를) 받았습니다.
오버로드 2/5('(reducer: (state: Todo[], action: Action) => ({ in: number; content: string; } | Todo)[], initialState: never, initializer?: undefined): [never, Dispatch<Action>]')에서 다음 오류가 발생했습니다.
'never[]' 형식의 인수는 'never' 형식의 매개 변수에 할당될 수 없습니다.ts(2769)

0개의 인수가 필요한데 1개를 가져왔습니다.ts(2554)

(property) data: {
id: number;
content: string;
}

<소스>

import { useEffect, useReducer, useRef, useState } from "react";
import "./App.css";
import Editor from "./components/Editopr";
import { Todo } from "./types";
import Todoitem from "./components/TodoItem";

type Action =
  | {
      type: "CREATE";
      data: { in: number; content: string };
    }
  | { type: "DELETE"; id: number };

function reducer(state: Todo[], action: Action) {
  switch (action.type) {
    case "CREATE":
      return [...state, action.data];
    case "DELETE":
      return state.filter((todo) => todo.id !== action.id);
  }
}

function App() {
  const [todos, dispatch] = useReducer(reducer, []);
  const idRef = useRef(0);

  const onClickAdd = (text: string) => {
    dispatch({ type: "CREATE", data: { id: idRef.current++, content: text } });
  };

  const onClickDelete = (id: number) => {
    dispatch({ type: "DELETE", id: id });
  };

  useEffect(() => {
    console.log(todos);
  }, [todos]);

  return (
    <>
      <h1>Todo</h1>
      <Editor onClickAdd={onClickAdd}>
        <div>child</div>
      </Editor>
      <div>
        {todos.map((todo) => (
          <Todoitem key={todo.id} {...todo} onClickDelete={onClickDelete} />
        ))}
      </div>
    </>
  );
}

export default App;