Início / coding / Perguntas / 79479720
Accepted
eskimopest
Asked: 2025-03-03 04:47:27 +0800 CST

Problemas com o React TypeScript useReduce

  • 772

Estou aprendendo React e TypeScript. Estou tentando construir um aplicativo de tarefas com useReducer, mas estou recebendo alguns erros. Não sei se eles estão conectados ou não.

Meu código é o seguinte

import { useReducer, useState } from "react";
import { Sidebar } from "../components/Sidebar";

interface State {
  todos: [];
}

enum ActionType {
  Add = "ADD",
  Remove = "REMOVE",
}

interface Action {
  type: ActionType;
  payload: {
    id: string;
    title: string;
  };
}

const initialState: State = {
  todos: [],
};

const reducer = (state: State, action: Action) => {
  switch (action.type) {
    case ActionType.Add:
      return [
        ...state.todos,
        { id: action.payload.id, title: action.payload.title },
      ];
    case ActionType.Remove:
      
    default:
      return state.todos;
  }
};
export const Todo = () => {
  const [state, dispatch] = useReducer(reducer, initialState);   // first mistake is here
  const [input, setInput] = useState<string>("");

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    // second mistake is here
    dispatch({
      type: ActionType.Add,
      payload: { id: crypto.randomUUID(), title: input },
    });
  };

  return (
    <>
      <Sidebar />
      <div className="main">
        <form onSubmit={(e) => handleSubmit(e)}>
          <input type="text" onChange={(e) => setInput(e.target.value)} />
          <button>add</button>
        </form>
      </div>
    </>
  );
};

o primeiro erro é: useReducer diz "Nenhuma sobrecarga corresponde a esta chamada..."

o segundo é quando eu chamo o dispatch e ele diz "Esperava 0 argumentos, mas obteve 1"

Agradeço desde já a ajuda.

reactjs

1 respostas

  1. Best Answer

    Seu estado é um objeto, com uma única propriedade - todos, que deve ser um array de Todoitens. O redutor deve pegar o estado original e retornar um novo estado (ou o mesmo estado) com o mesmo formato. Quando você está adicionando um item, ou no tipo padrão, você retorna apenas o array de todos. Além disso, o payload é um item todo, mas o todosé apenas um array sem tipo de item.

    Veja os comentários no código ( TS playground ):

    interface Todo {
  id: string;
  title: string;
}

interface State {
  todos: Todo[];
}

enum ActionType {
  Add = "ADD",
  Remove = "REMOVE",
}

interface Action {
  type: ActionType;
  payload: Todo; // The payload is a Todo
}

const initialState: State = {
  todos: [],
};

const reducer = (state: State, action: Action) => {
  switch (action.type) {
    case ActionType.Add:
      // return the same shape of state
      return {
        todos: [
          ...state.todos,
          {
            id: action.payload.id,
            title: action.payload.title
          },
        ]
      }
    case ActionType.Remove:

    default:
      return state; // return the entire state and not just todos
  }
};
    • 0

relate perguntas