test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 11:58:10 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix: 修复 inputTable ui 组件删除中间数据后修改后面的行导致数据混乱的问题 (#6892)

Browse Source
This commit is contained in:
liaoxuezhi 2023-05-15 22:10:11 +08:00 committed by GitHub
parent 6b978cc2dc
commit fb63b27eac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/amis-ui/src/components/Combo.tsx
View File

@ -326,7 +326,13 @@ export function ComboItem({
classnames: cx,
formRef
}: ComboItemProps) {
const methods = useSubForm(value, translate, data => update(index, data));
const indexRef = React.useRef(index);
React.useEffect(() => {
indexRef.current = index;
}, [index]);
const methods = useSubForm(value, translate, (data: any) =>
update(indexRef.current!, data)
);
React.useEffect(() => {
formRef?.(methods, index);
return () => {

36
packages/amis-ui/src/components/InputTable.tsx
View File

@ -77,11 +77,11 @@ export function InputTable({
}: InputTabbleProps) {
const subForms = React.useRef<Record<any, UseFormReturn>>({});
const subFormRef = React.useCallback(
(subform: UseFormReturn | null, index: number) => {
(subform: UseFormReturn | null, id: string) => {
if (subform) {
subForms.current[index] = subform;
subForms.current[id] = subform;
} else {
delete subForms.current[index];
delete subForms.current[id];
}
},
[subForms]
@ -143,17 +143,18 @@ export function InputTable({
control
});
const {trigger} = useFormContext();
const {trigger, setValue} = useFormContext();
// useFieldArray 的 update 会更新行 id，导致重新渲染
// 正在编辑中的元素失去焦点，所以自己写一个
const lightUpdate = React.useCallback(
(index: number, value: any) => {
const arr = control._getFieldArray(name);
arr[index] = {...value};
control._updateFieldArray(name, arr);
trigger(name);
control._subjects.watch.next({});
// const arr = control._getFieldArray(name);
// arr[index] = {...value};
// control._updateFieldArray(name, arr);
// trigger(name);
// control._subjects.watch.next({});
setValue(`${name}.${index}`, value);
},
[control]
);
@ -263,7 +264,7 @@ export interface InputTableRowProps {
index: number;
translate: TranslateFn;
classnames: ClassNamesFn;
formRef: (form: UseFormReturn | null, index: number) => void;
formRef: (form: UseFormReturn | null, id: string) => void;
}
export function InputTableRow({
@ -275,13 +276,20 @@ export function InputTableRow({
formRef,
classnames: cx
}: InputTableRowProps) {
const methods = useSubForm(value, translate, data => update(index, data));
const indexRef = React.useRef(index);
React.useEffect(() => {
formRef?.(methods, index);
indexRef.current = index;
}, [index]);
const methods = useSubForm(value, translate, (data: any) =>
update(indexRef.current!, data)
);
React.useEffect(() => {
formRef?.(methods, value.id);
return () => {
formRef?.(null, index);
formRef?.(null, value.id);
};
}, [methods]);
}, [methods, value.id]);
return (
<>