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是函数作用域不是应该在整个函数组件么,怎么还是用了老变量?

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐