iframe 内嵌页面,通过监听message事件进行通讯,刚上手hook,对语法不熟练踩了个大坑,记录下来给自己提个醒,
问题代码如下:
...
const form = useMemo(() => {
console.log('formValue',formValue)
const pattern = pageType == 'detail' ? 'readOnly':'editable'
return createForm({...formValue,pattern })
}, [formValue]);
const messageFun = (event) => {
console.log('form', form);
}
// 初始化监听事件
useEffect(() => {
console.log('addEventListener 初始化')
window.addEventListener('message', messageFun);
return () => {
window.removeEventListener('message',messageFun);
}
},[]);
useEffect用来触发监听,然后别的函数会修改formValue,触发form重新初始化,但是在messageFun 函数中打印form始终是旧form,怎么都找不到原因。甚至怀疑是react+addEventListener 有什么阴谋诡计。
最后再官网的useEffect描述中发现了问题:
useEffect的依赖项如果没有对应变量,就不会在内部引用时使用上一次的旧变量。最后在依赖项中添加了依赖解决
// 初始化监听事件
useEffect(() => {
console.log('addEventListener 初始化')
window.addEventListener('message', messageFun);
return () => {
window.removeEventListener('message',messageFun);
}
},[form]); // 这里加了依赖
虽然解决了,但是其实有些费解的,messageFun是函数作用域不是应该在整个函数组件么,怎么还是用了老变量?