React Hook useCallback() 与 useState var 不更新状态[重复]

Question

我有一个反应本机应用程序，它具有布尔值来渲染某些组件，但状态未在 useCallback 中更新

export const Foo = <T>(props):<T> => {
  const value = undefined
  const [bar, setBar] = useState<boolean>(false)
  
  useEffect(() => {
    pipe(
      value,
      O.fromNullable,
      O.fold(
        () => setBar(false),
        () => setBar(true)
      ),
    )
  }, [value])

  const foo = useCallback(() => {
    runFirstFunction() //changes some of the states 
    pipe(
      bar,
      B.fold(
        () => falseFunction(),
        () => trueFunction(),
      ),
    )
    restOfFooFunctionality()...

  },[setBar])

}

foo 被调用为组件的 onPress 函数， 当 foo 被调用时，状态值得到一个值，并且 useEffect 生效，并且 bar 的值为 true，但 foo 最初具有 bar 的状态，其中它为 false，并且 foo 中的任何内容都不会使其重新渲染以更新我正在寻找的状态一种获取 useCallback() 内部 bar 当前状态以调用 useCallback() 内部函数的方法

我尝试过使用依赖项，但这只是破坏了应用程序并且调用 setState 不会更新 useCallback() 内的状态，希望有人有一个很棒的解决方案，因为这不想重做整个文件

Answer 1

在您的代码中， useCallback 挂钩仅依赖于 setBar 函数，该函数用于更新栏状态。但是，setBar 并未在 foo 函数内部调用，因此无需将其包含为依赖项。

要获取 foo 函数内 bar 的当前值，可以直接使用 bar 变量。

export const Foo = <T>(props):<T> => {
  const value = undefined
  const [bar, setBar] = useState<boolean>(false)
  
  useEffect(() => {
    pipe(
      value,
      O.fromNullable,
      O.fold(
        () => setBar(false),
        () => setBar(true)
      ),
    )
  }, [value])

  const foo = useCallback(() => {
    runFirstFunction() //changes some of the states 

    if (bar) {
      trueFunction();
    } else {
      falseFunction();
    }

    restOfFooFunctionality()...

  }, [bar, runFirstFunction, falseFunction, trueFunction, restOfFooFunctionality])

}