Question

在功能性 React 组件中，我正在尝试做一个相当简单的操作-

const TestClass = ({lastIndex}) => {
const [activeIndex, setActiveIndex] = useState(0);
const [fullScreenGallery, setFullScreenGallery] = useState(false);

const handleKeyChange = (e) => {
  switch(e.code) {
    case 'ArrowLeft': 
      if(activeIndex - 1 < 0) return setActiveIndex(lastIndex);
      return setActiveIndex(activeIndex-1);
    case 'ArrowRight':
      if(activeIndex + 1 > lastIndex) return setActiveIndex(0);
      return setActiveIndex(activeIndex+1);
    case 'Escape':
      if(fullScreenGallery) {
        // closeFullScreenGallery();
       return;
      }
    }
  }


useEffect(() => {
  document.addEventListener('keydown', handleKeyChange);
// other event listeners
}, []);

return (
<div>
  // some code
</div>
)
}

问题是，在handleKeyChange 中，即使我按下键，activeSlide 的值在1 之后也不会改变。谁能指出我做错了什么？ fullScreenGallery 也是如此。

如果我尝试在 useEffect 中添加 activeSlide 和 fullScreenGallery 作为依赖项，每当依赖项发生变化时，我的事件侦听器就会开始添加，最终导致页面崩溃。

此代码是类组件的一部分，我正在尝试将此类转换为功能组件。在类组件中，useEffect 代码写在 componentDidMount 中。

Answer 1

您需要“观察”activeIndex 的变化。通过像您一样设置 []，您的 useEffect 只会启动一次。因此，在此函数中使用的 activeIndex 变量始终包含初始值。

在此处了解更多信息。 https://fr.reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect

useEffect(() => {
  document.addEventListener('keydown', handleKeyChange);
// other event listeners
}, [activeIndex]);

您现在还需要删除侦听器。否则您很快就会被越来越多的事件淹没。

useEffect(() => {
  document.addEventListener('keydown', handleKeyChange);
  return () => {
    document.removeEventListener('keydown', handleKeyChange);
  }

// other event listeners
}, [activeIndex]);

我仍然不确定钩子是否比类更好。

访问从 useEffect [React]

1 个答案: