使用 useEffect 时钩子调用无效

Question

I get this error when trying to dispatch an action from my react functional component:

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

This React component does not render anything just listen to keypress event on the page

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

You will need to use the TypeScript typings for functional components, and provide the props as part of the generic typings. And don't forget to import the required modules.

import React, { useEffect } from 'react';

type Props = {};

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