用useEffect来控制subscribe订阅时，切换语言无法触发卸载时的处理

Question

我用useEffect，让组件挂载时提交订阅，卸载时取消订阅
但是切换语言时会多次触发订阅，而不会触发卸载时的取消订阅，只有切换到其他页面时才会触发取消订阅的处理
这种情况该如何解决？

  useEffect(() => {
    const unsubscribe = store.subscribe(() => {
      const { language } = store.getState()
      console.log("subscribe")
      setCurLanguage(language)
    })
    return () => {
      unsubscribe()
      console.log("unsubscribe")
    }
  }, [])

Answer 1

weixin_慕无忌8184591 2022-09-28 09:31:12

依赖项为空值 并不会卸载 应该更改为language 并且把 setCurLanguage 提取出去到在变更语言的事件函数当中，也就是你在切换的语言过程当中 才会处发卸载，如果照你这样写，每次render 就会触发 setState 再去render 一次，useEffect 依赖项是[] 又会导致setState再被触发 进入死循怀

• 提问者 qq_慕勒5016658 #1

  useEffect里提供一个回调函数就能达成组件卸载时触发的效果，空数组作为依赖项只会在组件挂载时触发，并不会造成死循环
  我这里的问题是切换语言时，组件都会重新挂载，但并没有进行卸载