无法执行React状态更新-React手势库

Question

尝试了不同的解决方案（包括推荐的方法Can't perform a React state update on an unmounted component）后，似乎没有什么可以解决我的问题。

编辑：我注意到这种情况仅在第一个渲染即时消息没有出现任何错误后才会在第一个渲染上发生

我在组件内部使用react-gesture-gallery，就像这样：

return (
    <CardsContainer>
      <Gallery
        style={{
          background: "linear-gradient(to bottom, #FFFFFF,#5643fa )"
        }}
        index={index}
        onRequestChange={ i => setIndex(i)}
      >
        <SingleSwipeCard
          handleClick={() => startDefaultGame()}
          text={practiceSavedWordsText}
        />
       <SingleSwipeCard
          handleClick={() => startDefinitionGame()}
          text={practiceCompletingSentences}
        />
      <SingleSwipeCard
          handleClick={() => startGrammerGame()}
          text={practiceTypingWordsText}
        />
    </Gallery>
   </CardsContainer>
)

我有3 {SingleSwipeCard个组件，现在我希望动画能自动播放，所以我的useEffect钩子看起来像这样：

 useEffect(() => {
    console.log("did mount");

    timer = setInterval(() => {
      if (index === 2) {
        setIndex(0);
      } else setIndex(index + 1);
    }, 8000);

    return () => {
      console.log("un mount");
      clearInterval(timer);
    };
  }, [index, gameStarted]);

动画可以按预期工作，但是问题是我的handleClick函数将用户重定向到应用程序中的另一个页面，所以我得到了Can't perform a React state update on an unmounted component....

尽管该组件似乎在页面路由功能之后未呈现，并且在最后一次呈现时调用了cleanUp函数，但此处缺少某些内容，并且出现了内存泄漏。