描述问题:
在react@18+的Concurrent模式下,amis通过setValue更新数据出现报错
截图或视频:
如何复现(请务必完整填写下面内容):
- 你是如何使用 amis 的?
将amis集成到已有的react应用中,通过npm安装,我们自己基于2.9.0的分支,维护了一个新的分支 - amis 版本是什么?请先在最新 beta 版本测试问题是否存在
amis是2.9.0 - 粘贴有问题的完整
amis schema
代码:
这是能复现问题的react代码: https://codesandbox.io/p/sandbox/chun-reactfu-xian-wen-ti-pmrhc5
这是能复现问题的amis代码。由于某些原因,codesandbox无法启动项目,但是可以下载到本地,本地启动复现: https://codesandbox.io/p/devbox/pensive-wilson-79w5vs - 操作步骤
经过搜索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暂时无法正常工作。不知道官方是怎么看待这个问题的?如果能确认这个问题,是否有对应的解决方案
1条答案
按热度按时间iih3973s1#
👍 Thanks for this!
🏷 I have applied any labels matching special text in your issue.
Please review the labels and make any necessary changes.