Javascript 处理窗口事件时本地状态值错误（React）

我有一个状态值

ccFormDetails

，默认值为空对象

  const [ccFormDetails, setCCFormDetails] = useState({})

在第一个

useffect

中，我调用一个函数，用相关数据填充

ccFormDetails

  const getCCFormData = async () => {
    const ccFormResult = await ContractService.getContractsCCFormData()
    const { ccFormData } = ccFormResult
    setCCFormDetails(ccFormData)
  }

在第二个

useffect

中，我创建了一个名为

message

的事件，并为其分配了一个

handlegevent

处理程序

  useEffect(() => {
    window.addEventListener('message', handleCgEvent)
    return () => window.removeEventListener('message', handleCgEvent)
  }, [])

我正在渲染一个带有提交按钮的

iframe

，单击该按钮时会发出

消息

事件

然后，当我单击

iframe

中的sumbit按钮时，

handlegevent

处理程序将启动，并应提取

ccFormDetails

的正确（更新、fecthed）值。（我可以在React components树中看到已正确填充）

但是我得到的是

{}

表示原始默认状态。 根据我对React的了解，这不应该发生。

---

我是否遗漏了某些内容/事件处理是否会造成混乱状态？

这里的问题是您使用的是在安装组件时创建的

handledgevent

，并且

ccFormDetails

使用其默认值封装在其中。为了获得最新状态，必须使用useRef。比如：

const[ccFormDetails，setCCFormDetails]=useState（{}）
const formRef=useRef（）；
formRef.current=ccFormDetails；
常量handledgevent=e=>{
如果（例如，数据==='reload\u cg'）{
console.log（'fail'）
}
如果（例如数据['event_id']=='cg success'）{
console.log（'success'）
console.log（'ccFormDetails1'，formRef.current）
}
}
useffect（（）=>{
window.addEventListener（'message'，handledgevent）
return（）=>window.removeEventListener（'message'，handledgevent）
}, []);

如果您可以添加和删除事件侦听器，那么我将只添加

[ccFormDetails]

作为依赖项，假设在其属性更改时重新创建整个对象

---

要进一步了解闭包中的过时值，这是一篇很棒的博客文章：

非常感谢。真的很感激

  const handleCgEvent = e => {
    if (e.data === 'reload_cg') {
      console.log('fail')
    }

    if (e.data['event_id'] === 'cg-success') {
      console.log('success')
      console.log('ccFormDetails1 ', ccFormDetails)
    }
  }