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.43k stars 1.49k forks source link

[Bug Report] 当form上有initialValues时,数组组件里先删除后添加,会复用默认值。 #4235

Open Qquanwei opened 1 week ago

Qquanwei commented 1 week ago

Reproduction link

Edit on CodeSandbox

Steps to reproduce

先删除数组元素,再添加一个,会复用默认值。

What is expected?

在实际使用中,数组添加的是个动态组件,不同列表项之间不能复用数据,所以当我从一个已经创建好的配置中克隆一份配置,然后删除旧的列表项数据,添加新列表项数据时,此时复用会导致逻辑出现异常。

删除后,再添加不使用默认值,只有第一次初始化时才会使用默认值。

What is actually happening?

目前删除后再添加复用了现有数据

Package

@formily/core@2.3.1


Qquanwei commented 1 week ago

临时解法,定制一个Remove,在Remove时候删除默认值,可以评估一下是否可以作为默认行为

// 为了修复,在删除时,需要清除默认值影响
export const Remove = React.forwardRef((props: RemoveProps, ref) => {
  const index = useIndex?.(props.index) || 0;
  const self = useField();
  const base = useArray?.();
  const prefixCls = usePrefixCls('formily-array-base');
  if (base?.field?.pattern !== 'editable') {
    return null;
  }
  return (
    <Button
      status="danger"
      shape="circle"
      icon={<IconDelete />}
      {...props}
      disabled={self.disabled}
      className={`${prefixCls}-remove ${props.className || ''}`}
      ref={ref}
      onClick={(e) => {
        if (self?.disabled) {
          return;
        }
        e.stopPropagation();
        // 新增逻辑:删除时删除当前数组的默认值,其他数组也可能遇到,如果遇到可以提出一个公共的remove。当前remove不耦合resourcetempalte
        base.field.form.setInitialValuesIn(base.field.address, null);
        base?.field?.remove?.(index);
        base?.props?.onRemove?.(index);
        if (props.onClick) {
          props.onClick(e);
        }
      }}
    />
  );
});