React 不更新状态（React-Hooks）

Question

我有以下设置：

  const templates = [
    'dot',
    'line',
    'circle',
    'square',
  ];
  
  const [currentTemplate, setCurrentTemplate] = useState(0);

  const changeTemplate = (forward = true) => {
    let index = currentTemplate;
    index = forward ? index + 1 : index - 1;
    if (index > templates.length - 1) {
      index = 0;
    } else if (index < 0) {
      index = templates.length - 1;
    }
    setCurrentTemplate(index);
  };

  useEffect(() => {
    console.log(`Current Template is: ${templates[currentTemplate]}`);
  }, [currentTemplate]);

  useKeypress('ArrowLeft', () => {
    changeTemplate(false);
  });
  useKeypress('ArrowRight', () => {
    changeTemplate(true);
  });

这是useKeypress-Hook使用的：

  import { useEffect } from 'react';
/**
 * useKeyPress
 * @param {string} key - the name of the key to respond to, compared against event.key
 * @param {function} action - the action to perform on key press
 */
export default function useKeypress(key: string, action: () => void) {
  useEffect(() => {
    function onKeyup(e: KeyboardEvent) {
      if (e.key === key) action();
    }
    window.addEventListener('keyup', onKeyup);
    return () => window.removeEventListener('keyup', onKeyup);
  }, []);
}

每当我按向左或向右箭头键时，都会触发该功能。但是currentTemplate 变量并没有改变。它始终保持在 0。useEffect 仅在我从左到右或以其他方式切换键时触发。单击同一个键两次，不会再次触发useEffect，但它应该！从右到左变化时，输出为Current Template is: square，从左到右变化时，输出为Current Template is: line。但这永远不会改变。 currentTemplate 的值始终保持为0。

我错过了什么？

Answer 1

问题在于useKeypress 挂钩中的useEffect。

export default function useKeypress(key: string, action: () => void) {
  useEffect(() => {
    function onKeyup(e: KeyboardEvent) {
      if (e.key === key) action();
    }
    window.addEventListener('keyup', onKeyup);
    return () => window.removeEventListener('keyup', onKeyup);
  }, []); // ? problem
}

钩子是一个没有依赖关系的useEffect。意思是，它只会触发一次。这是您传递到此挂钩的action 的问题。每当您的组件中的changeTemplate-action 发生变化时（即在重新渲染时），对此的引用不会在useKeypress-hook 内更新。

要解决这个问题，需要将action添加到useEffect的依赖数组中：

export default function useKeypress(key: string, action: () => void) {
  useEffect(() => {
    function onKeyup(e: KeyboardEvent) {
      if (e.key === key) action();
    }
    window.addEventListener('keyup', onKeyup);
    return () => window.removeEventListener('keyup', onKeyup);
  }, [action]); // ? whenever `action` changes, the effect will be updated
}

这是为了确保在给定的action 更改时更新效果。进行此更改后，事情应该会按预期进行。

优化：

此时将为每次渲染重新生成useEffect，因为每次渲染都会实例化changeTemplate 函数。为避免这种情况，您可以用useCallback 包装changeTemplate，以便记住函数：

const changeTemplate = useCallback(
  (forward = true) => {
    let index = currentTemplate;
    index = forward ? index + 1 : index - 1;
    if (index > templates.length - 1) {
      index = 0;
    } else if (index < 0) {
      index = templates.length - 1;
    }
    setCurrentTemplate(index);
  }, 
  // Regenerate the callback whenever `currentTemplate` or `setCurrentTemplate` changes
  [currentTemplate, setCurrentTemplate]
);