amis@2.9.0在react@18+的concurrent模式下,出现报错问题

dvtswwa3  于 4个月前  发布在  React
关注(0)|答案(1)|浏览(75)
描述问题:

在react@18+的Concurrent模式下,amis通过setValue更新数据出现报错

截图或视频:

如何复现(请务必完整填写下面内容):
  1. 你是如何使用 amis 的?
    将amis集成到已有的react应用中,通过npm安装,我们自己基于2.9.0的分支,维护了一个新的分支
  2. amis 版本是什么?请先在最新 beta 版本测试问题是否存在
    amis是2.9.0
  3. 粘贴有问题的完整 amis schema 代码:
    这是能复现问题的react代码: https://codesandbox.io/p/sandbox/chun-reactfu-xian-wen-ti-pmrhc5
    这是能复现问题的amis代码。由于某些原因,codesandbox无法启动项目,但是可以下载到本地,本地启动复现: https://codesandbox.io/p/devbox/pensive-wilson-79w5vs
  4. 操作步骤

经过搜索issue发现了,相似问题 #4122
在此基础上,我们经过复现demo,也分析了下产生该问题的原因:

  • React18发布后,没有了所谓的模式,直接启用了concurrency
  • 在React官网查询到constructor也会执行多次,并且在上述demo中复现:https://legacy.reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects

  • 在amis源代码中,使用了HocScoped高阶,生成的增强组件ScopedComponent,会在自己的constructor创建对应的scoped实例,并存储对应的子组件实例,当constructor重复执行,就会重复存储同类的组件实例 * 在执行对应的action时,CmptAction组件中,通过getComponentById获取对应实例时,就会获取到第一次创建的React组件实例,但是该实例并没有实际渲染到dom,导致setData时报错

我们的结论是:在React18模式下,由于这个原因,amis暂时无法正常工作。不知道官方是怎么看待这个问题的?如果能确认这个问题,是否有对应的解决方案

iih3973s

iih3973s1#

👍 Thanks for this!
🏷 I have applied any labels matching special text in your issue.

Please review the labels and make any necessary changes.

相关问题