Неверный вызов ловушки при использовании useEffect

Question

Я получаю эту ошибку при попытке отправить действие из моего функционального компонента реагирования:

Invalid hook call. Hooks can only be called inside of the body of a function component

Этот компонент React ничего не рендерит, просто слушает событие нажатия клавиши на странице

import { useDispatch } from 'react-redux';
const dispatch = useDispatch();

const {
  actions: { moveDown }
} = gameSlice;

type Props = {};

export const Keyboard = ({}: Props) => {
  useEffect(() => document.addEventListener('keydown', ({ keyCode }) => dispatch(moveDown())));
  return <></>;
};

Answer 1

Вам нужно будет использовать типизацию TypeScript для функциональных компонентов и предоставить реквизиты как часть типовых типографий c. И не забудьте импортировать необходимые модули.

import React, { useEffect } from 'react';

type Props = {};

export const Keyboard: React.FC<Props> = () => {
  useEffect(() => document.addEventListener('keydown', ({ keyCode }) => dispatch(moveDown())));
  return <></>;
};