Reactjs 反应如何在传递的函数中使用状态

我正在使用React上下文传递状态。当我的状态改变时，它在子组件中也会改变（控制台日志显示新值），但当在函数中使用此状态时，它不会在那里更新（console.log显示旧值）

我需要重新启动函数吗？怎么做

  const {user, userInfo, ref} = useSession(); <-- wrapper for useContext
  console.log(userInfo); <--- correct, updated value

  const haalDataOp = async () => {
    console.log(userInfo.enelogic); <--- old value displaying
    ...
  }

---

在我的示例中，我还尝试使用useCallback（在dep数组中使用userInfo），但这并不能奏效

常数。。。userInfo…

是一个常量，因此在如下组件中：

console.log('render', userInfo.enelogic) // different value in each render
const haalDataOp = async () => {
  console.log('before', userInfo.enelogic) // correct old value
  await update()
  console.log('after', userInfo.enelogic)  // still the same old value
}

return <button onClick={haalDataOp} />

…因为

haalDataOp

中的

userInfo

是引用原始渲染值的闭包。如果需要访问指向未来渲染中最新值的可变引用，则可以：

const userInfoRef=useRef（）
userInfoRef.current=userInfo
console.log（'render'，userInfo.enelogic）//每个呈现中的值不同
const haalDataOp=async（）=>{
console.log（'before'，userInfoRef.current.enelogic）//旧值
等待更新（）
console.log（'after'，userInfoRef.current.enelogic）//应为新值
}
返回

但是，可能存在竞争条件和/或在下一次渲染之前确定地执行

'after'

代码，在这种情况下，您需要使用一些其他技巧

---

我怀疑正是这种情况需要

const{ref}=useSession（）

，所以请阅读文档。

您在哪里/如何使用

haalDataOp

？从添加到articleHi的按钮上，我试图阅读您的答案，但我看不太清楚。我不是在这个haalDataOp函数中更新我的状态，我只是在用这个状态做一些事情。该状态由其他进程更新（在本例中，Firebase更新了我的状态），我希望在我的子组件中使用新状态。（useSession钩子中提到的ref是firestore ref，而不是react ref）它确实使用了useRef，但我仍然不明白它是如何工作的。我的另一个问题，也是这个问题吗？

console.log('render', userInfo.enelogic) // different value in each render
const haalDataOp = async () => {
  console.log('before', userInfo.enelogic) // correct old value
  await update()
  console.log('after', userInfo.enelogic)  // still the same old value
}

return <button onClick={haalDataOp} />

render old
before old
after old
render new

const userInfoRef = useRef()
userInfoRef.current = userInfo

console.log('render', userInfo.enelogic) // different value in each render
const haalDataOp = async () => {
  console.log('before', userInfoRef.current.enelogic) // old value
  await update()
  console.log('after', userInfoRef.current.enelogic)  // should be new value
}

return <button onClick={haalDataOp} />