Блог

Что я делаю, так это создаю систему аутентификации с помощью перехватчиков реакции. Однако, когда я объявляю и вызываю константу с использованием компонента реакции, она возвращает ошибку ниже. Какое подходящее место для объявления константы и / или функции?

Ошибка: перехватчик реакции «useDispatch» не может быть вызван на верхнем уровне. Перехваты реакции должны вызываться в компоненте функции реакции или пользовательской функции перехвата реакции

 function handleSubmit({email, password}) {
  dispatch(signInRequest(email, password));
}

const dispatch = useDispatch();



class Login extends React.Component {
  render() {
    return (
      <>
        //Other code here
      </>
    );
  }
}

export default Login;
 

Вы не можете вызывать перехватчики реакции вне функционального компонента или в компоненте класса. https://reactjs.org/docs/hooks-rules.html

 
const Login = () => {
  const dispatch = useDispatch();
  function handleSubmit({email, password}) {
      dispatch(signInRequest(email, password));
  }
  render() {
    return (
      <>
        //Other code here
      </>
    );
  }
}

export default Login;
 

Вы используете компонент класса и пытаетесь использовать хук, который никогда не ошибется. Перехватчики должны вызываться внутри функционального компонента, например:

 const Login = () => {
 const dispatch = useDispatch();

function handleSubmit({email, password}) {
  dispatch(signInRequest(email, password));
}

    return (
      <>
        //Other code here
      </>
    );
  
}

export default Login;