Custom React Hook с обратным вызовом делает закрытие

Question

То, чего я пытаюсь добиться, - это пользовательский хук, который вызывает обратный вызов при нажатии определенной клавиши. Дело в том, что обратный вызов зависит от компонента prop. К сожалению, обратный вызов передается на ловушку только один раз, и он закрывается по значению реквизита.

Код крючка:

export default function useKeyPress(targetKey, callback) {
  const keyPressedHandler = ({ key }) => {
    if (key === targetKey && callback && typeof callback === 'function') {
      callback();
    }
  };

  useEffect(() => {
    window.addEventListener('keyup', keyPressedHandler);
    return () => {
      window.removeEventListener('keyup', keyPressedHandler);
    };
  }, []);
}

Компонент, который использует ловушку:

const Component = ({ isActive }) => {
  // isActive is changing here
  useKeyPress('ArrowRight', () => {
    if (isActive) // isActive always has the initial value 
      // do something if isActive is true
  });
}

Как я могу переписать свой хук или как мне справиться с такой ситуацией?

Answer 1

Я воспроизвел проблему на Codepen https://codepen.io/tedseds/pen/oNXzvoK

Когда вы нажимаете стрелку вправо, она всегда записывает isActive как ложь, даже когда изменяется пропел.

Решение https://codepen.io/tedseds/pen/ZEGpzPm

Вам необходимо передать опору callback в качестве зависимости от useEffect. Он подключит прослушиватель событий с последним обратным вызовом.

Код:

function useKeyPress(targetKey, callback) {
  const keyPressedHandler = ({ key }) => {
    if (key === targetKey && callback && typeof callback === "function") {
      callback();
    }
  };

  useEffect(() => {
    window.addEventListener("keyup", keyPressedHandler);
    return () => {
      window.removeEventListener("keyup", keyPressedHandler);
    };
  }, [callback]);
}