React - 自定义钩子中的更新道具

Question

我有一个自定义钩子，可以给我一定比例的滚动。 我从状态管理解决方案 Zusand 中获取值。 我在组件中使用它来更新页面元素上的一些 styles。

问题是我只想在作为组件的道具传递的特定条件下更新这些元素。 而这些条件并没有在我的钩子中更新。

我不知道我应该如何更改它以获得更新的条件。

import create from 'zustand'

const useStore = create(() => {
  scroll: 0
})

const useScroll = (callback: (scroll: number) => void): null => {
  const subscribe = useRef()

  useEffect(() => {
    if (subscribe & subscribe.current) {
      // Unsubscribe
      subscribe.current()
    }

    subscribe.current = useStore.subscribe(() => {
      callback(useStore.getState().scroll)
    })
  }, [subscribe])

  return null
}

const myComponent = (condition: Boolean) => {
  console.log(condition) // gives the updated value of the prop

  useScroll(() => {
    console.log(condition) // is not updated
  })
}

Answer 1

我的猜测是您需要将callback参数添加到useEffect正在观看的属性列表中：

   useEffect(() => {
        ...
   }, [subscribe, callback])
   

这样，每当 function callback由于新条件而发生变化时，useEffect 都会重新运行。