Início / coding / Perguntas / 79301242
Accepted
mikeb
Asked: 2024-12-22 23:31:20 +0800 CST

React - Padrão onSubmit e useNavigate

  • 772

Estou tentando enviar e redirecionar no React usando useCallback, mas não estou usando o hook corretamente. Qual é o padrão para salvar dados e então redirecionar?

const onSubmit = useCallback((data: FacilityEntity) => {
  saveFacility(data);
  useNavigate().navigate('/facilities', { replace: true })
}, []);
javascript

1 respostas

  1. Best Answer

    Emitir

    O código está quebrando as Regras de Hooks do React , especificamente chamando-o em uma função de retorno de chamada/aninhada

    Não chame Hooks dentro de loops, condições ou funções aninhadas. Em vez disso, sempre use Hooks no nível superior da sua função React, antes de qualquer retorno antecipado. Você só pode chamar Hooks enquanto o React estiver renderizando um componente de função:

    • ✅ Chame-os no nível superior no corpo de um componente de função.
    • ✅ Chame-os no nível superior no corpo de um Hook personalizado.

    Não há suporte para chamar Hooks (funções que começam com use) em nenhum outro caso, por exemplo:

    • 🔴 Não chame Hooks dentro de condições ou loops.
    • 🔴 Não chame Hooks após uma returninstrução condicional.
    • 🔴 Não chame Hooks em manipuladores de eventos.
    • 🔴 Não chame Hooks em componentes de classe.
    • 🔴 Não chame Hooks dentro de funções passadas para useMemo, useReducer, ou useEffect.

    Solução

    Chame todos os hooks React no nível superior. Mova a useNavigatechamada do hook para fora da função de retorno de chamada e especifique todas as dependências de hook apropriadas.

    Exemplo:

    const navigate = useNavigate();

...

const onSubmit = useCallback((data: FacilityEntity) => {
  saveFacility(data);
  navigate('/facilities', { replace: true });
}, [navigate, saveFacility]);
    • 1

relate perguntas