alibaba / formily

📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3
https://formilyjs.org/
MIT License
11.48k stars 1.49k forks source link

[Bug Report] ArrayCollapse 用 index 作为 React.Key #3208

Closed Hoo1nKyoma closed 2 years ago

Hoo1nKyoma commented 2 years ago

Reproduction link

Edit on CodeSandbox

Steps to reproduce

  1. 新建两个 ArrayCollapse.CollapsePanel
  2. 在第一个 Panel 中的 Input 输入 hello
  3. 在第二个 Panel 中的 Input 输入 world
  4. 删除第一个 Panel
  5. 查看当前第一个 Panel 中的 Input 的内容

What is expected?

期望结果是 world

What is actually happening?

实际的结果是 hello

Package

@formily/antd@2.1.5


  1. 在 @formily/antd 的 ArrayCollapse 组件中,使用了数组中的 index 来作为 React 的 key 使用,从而导致了该问题。
  2. 在 Demo 中,我没有处理 onChange 更快的复现了该问题。
janryWang commented 2 years ago

没看懂,什么问题

Hoo1nKyoma commented 2 years ago

没看懂,什么问题

https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318

直接看这篇文档吧,用了 index 作为 key 带来的负面影响。

如果之前没了解过这个的话,可能要 review 下所有 type Array 的组件了。

janryWang commented 2 years ago

先学会描述问题再提issue吧

Hoo1nKyoma commented 2 years ago

先学会描述问题再提issue吧

已修改复现步骤描述,之前漏了4、5两步,sry

janryWang commented 2 years ago

这不是bug,formily的任何自定义组件,都是受控的,你需要接收props.value/props.onChange,这样就能实现数据同步

zboMa commented 1 year ago

@Hoo1nKyoma 解决了吗老哥