fix: remove unset

RylanBot · RylanBot · commit da55f8cd2bb0 · 2025-12-12T17:44:30.000+08:00
diff --git a/packages/components/form/FormItem.tsx b/packages/components/form/FormItem.tsx
@@ -4,7 +4,7 @@ import {
   CloseCircleFilledIcon as TdCloseCircleFilledIcon,
   ErrorCircleFilledIcon as TdErrorCircleFilledIcon,
 } from 'tdesign-icons-react';
-import { get, isEqual, isFunction, isObject, isString, set, unset } from 'lodash-es';
+import { get, isEqual, isFunction, isObject, isString, set } from 'lodash-es';
 
 import useConfig from '../hooks/useConfig';
 import useDefaultProps from '../hooks/useDefaultProps';
@@ -423,7 +423,6 @@ const FormItem = forwardRef<FormItemInstance, FormItemProps>((originalProps, ref
       return () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
         formListMapRef.current.delete(fullPath);
-        unset(form?.store, fullPath);
       };
     }
     if (!formMapRef) return;
@@ -432,7 +431,6 @@ const FormItem = forwardRef<FormItemInstance, FormItemProps>((originalProps, ref
     return () => {
       // eslint-disable-next-line react-hooks/exhaustive-deps
       formMapRef.current.delete(fullPath);
-      unset(form?.store, fullPath);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [snakeName, formListName]);
diff --git a/packages/components/form/__tests__/form-list.test.tsx b/packages/components/form/__tests__/form-list.test.tsx
@@ -4,6 +4,7 @@ import { fireEvent, mockTimeout, render, vi } from '@test/utils';
 
 import Button from '../../button';
 import Input from '../../input';
+import Radio from '../../radio';
 import FormList from '../FormList';
 import Form, { type FormProps } from '../index';
 
@@ -605,4 +606,199 @@ describe('Form List 组件测试', () => {
     await mockTimeout();
     expect(queryByText('用户名必填')).not.toBeTruthy();
   });
+
+  test('FormList with shouldUpdate', async () => {
+    const TestView = () => {
+      const [form] = Form.useForm();
+
+      const INIT_DATA = {
+        services: [
+          {
+            modelName: 'modelA',
+            routes: [
+              { type: 'weight', weight: 50, abtest: 'cid' },
+              { type: 'abtest', weight: 30, abtest: 'uid' },
+            ],
+          },
+        ],
+      };
+
+      return (
+        <Form form={form} initialData={INIT_DATA}>
+          <FormList name="services">
+            {(fields) => (
+              <>
+                {fields.map(({ key, name: serviceName }) => (
+                  <div key={key}>
+                    <FormList name={[serviceName, 'routes']}>
+                      {(routeFields, { add: addRoute }) => (
+                        <div>
+                          {routeFields.map((f) => (
+                            <div key={f.key} data-route-index={f.name}>
+                              <FormItem name={[f.name, 'type']} label="类型">
+                                <Radio.Group
+                                  options={[
+                                    { label: '权重', value: 'weight' },
+                                    { label: 'ABTest', value: 'abtest' },
+                                  ]}
+                                />
+                              </FormItem>
+
+                              <FormItem
+                                shouldUpdate={(p, n) =>
+                                  p.services?.[serviceName]?.routes?.[f.name]?.type !==
+                                  n.services?.[serviceName]?.routes?.[f.name]?.type
+                                }
+                              >
+                                {({ getFieldValue }) => {
+                                  const type = getFieldValue(['services', serviceName, 'routes', f.name, 'type']);
+                                  if (type === 'weight') {
+                                    return (
+                                      <FormItem key={type} name={[f.name, 'weight']} label="权重">
+                                        <Input placeholder={`route-weight-${serviceName}-${f.name}`} />
+                                      </FormItem>
+                                    );
+                                  }
+                                  if (type === 'abtest') {
+                                    return (
+                                      <FormItem key={type} name={[f.name, 'abtest']} label="分流Key">
+                                        <Input placeholder={`route-abtest-${serviceName}-${f.name}`} />
+                                      </FormItem>
+                                    );
+                                  }
+                                  return null;
+                                }}
+                              </FormItem>
+                            </div>
+                          ))}
+                          <Button id={`test-add-route-${serviceName}-default`} onClick={() => addRoute()}>
+                            新增默认路由
+                          </Button>
+                          <Button
+                            id={`test-add-route-${serviceName}-specified`}
+                            onClick={() => addRoute(INIT_DATA.services[0].routes[0])}
+                          >
+                            新增指定路由
+                          </Button>
+                        </div>
+                      )}
+                    </FormList>
+                  </div>
+                ))}
+              </>
+            )}
+          </FormList>
+        </Form>
+      );
+    };
+
+    const { container, getByPlaceholderText } = render(<TestView />);
+
+    // Test initial data - first route (type: weight)
+    const weightRadio0 = container.querySelector('[data-route-index="0"] input[value="weight"]') as HTMLInputElement;
+    expect(weightRadio0.checked).toBe(true);
+    expect((getByPlaceholderText('route-weight-0-0') as HTMLInputElement).value).toBe('50');
+    expect(container.querySelector('[placeholder="route-abtest-0-0"]')).toBeFalsy();
+
+    // Test initial data - second route (type: abtest)
+    const abtestRadio1 = container.querySelector('[data-route-index="1"] input[value="abtest"]') as HTMLInputElement;
+    expect(abtestRadio1.checked).toBe(true);
+    expect((getByPlaceholderText('route-abtest-0-1') as HTMLInputElement).value).toBe('uid');
+    expect(container.querySelector('[placeholder="route-weight-0-1"]')).toBeFalsy();
+
+    // Test switching first route from weight to abtest
+    const abtestRadio0 = container.querySelector('[data-route-index="0"] input[value="abtest"]') as HTMLInputElement;
+    fireEvent.click(abtestRadio0);
+    await mockTimeout();
+    expect((getByPlaceholderText('route-abtest-0-0') as HTMLInputElement).value).toBe('cid');
+    expect(container.querySelector('[placeholder="route-weight-0-0"]')).toBeFalsy();
+
+    // Test switching first route back to weight
+    fireEvent.click(weightRadio0);
+    await mockTimeout();
+    expect((getByPlaceholderText('route-weight-0-0') as HTMLInputElement).value).toBe('50');
+    expect(container.querySelector('[placeholder="route-abtest-0-0"]')).toBeFalsy();
+
+    // Test switching second route from abtest to weight
+    const weightRadio1 = container.querySelector('[data-route-index="1"] input[value="weight"]') as HTMLInputElement;
+    fireEvent.click(weightRadio1);
+    await mockTimeout();
+    expect((getByPlaceholderText('route-weight-0-1') as HTMLInputElement).value).toBe('30');
+    expect(container.querySelector('[placeholder="route-abtest-0-1"]')).toBeFalsy();
+
+    // Test switching second route back to abtest
+    fireEvent.click(abtestRadio1);
+    await mockTimeout();
+    expect((getByPlaceholderText('route-abtest-0-1') as HTMLInputElement).value).toBe('uid');
+    expect(container.querySelector('[placeholder="route-weight-0-1"]')).toBeFalsy();
+
+    // Test adding default route (empty data)
+    const addDefaultBtn = container.querySelector('#test-add-route-0-default');
+    fireEvent.click(addDefaultBtn);
+    await mockTimeout();
+    const newRouteRadios = container.querySelectorAll('[data-route-index="2"] input[type="radio"]');
+    expect(newRouteRadios.length).toBe(2);
+    // No radio should be checked initially
+    const checkedRadio = container.querySelector('[data-route-index="2"] input[type="radio"]:checked');
+    expect(checkedRadio).toBeFalsy();
+    // No conditional field should be rendered when type is empty
+    expect(container.querySelector('[placeholder="route-weight-0-2"]')).toBeFalsy();
+    expect(container.querySelector('[placeholder="route-abtest-0-2"]')).toBeFalsy();
+
+    // Test setting type to weight for new route
+    const newWeightRadio = container.querySelector('[data-route-index="2"] input[value="weight"]') as HTMLInputElement;
+    fireEvent.click(newWeightRadio);
+    await mockTimeout();
+    const newWeightInput = getByPlaceholderText('route-weight-0-2') as HTMLInputElement;
+    expect(newWeightInput).toBeTruthy();
+    expect(newWeightInput.value).toBe('');
+
+    // Test setting weight value
+    fireEvent.change(newWeightInput, { target: { value: '100' } });
+    await mockTimeout();
+    expect(newWeightInput.value).toBe('100');
+
+    // Test switching new route to abtest
+    const newAbtestRadio = container.querySelector('[data-route-index="2"] input[value="abtest"]') as HTMLInputElement;
+    fireEvent.click(newAbtestRadio);
+    await mockTimeout();
+    expect(container.querySelector('[placeholder="route-weight-0-2"]')).toBeFalsy();
+    const newAbtestInput = getByPlaceholderText('route-abtest-0-2') as HTMLInputElement;
+    expect(newAbtestInput).toBeTruthy();
+    expect(newAbtestInput.value).toBe('');
+
+    // Test setting abtest value
+    fireEvent.change(newAbtestInput, { target: { value: 'new-key' } });
+    await mockTimeout();
+    expect(newAbtestInput.value).toBe('new-key');
+
+    // Test switching back to weight - previous weight value should be preserved
+    fireEvent.click(newWeightRadio);
+    await mockTimeout();
+    expect(container.querySelector('[placeholder="route-abtest-0-2"]')).toBeFalsy();
+    const weightInputAgain = getByPlaceholderText('route-weight-0-2') as HTMLInputElement;
+    expect(weightInputAgain.value).toBe('100');
+
+    // Test adding specified route (with initial data)
+    const addSpecifiedBtn = container.querySelector('#test-add-route-0-specified');
+    fireEvent.click(addSpecifiedBtn);
+    await mockTimeout();
+    const specifiedWeightRadio = container.querySelector(
+      '[data-route-index="3"] input[value="weight"]',
+    ) as HTMLInputElement;
+    expect(specifiedWeightRadio.checked).toBe(true);
+    const specifiedWeightInput = getByPlaceholderText('route-weight-0-3') as HTMLInputElement;
+    expect(specifiedWeightInput.value).toBe('50');
+    expect(container.querySelector('[placeholder="route-abtest-0-3"]')).toBeFalsy();
+
+    // Test switching specified route to abtest
+    const specifiedAbtestRadio = container.querySelector(
+      '[data-route-index="3"] input[value="abtest"]',
+    ) as HTMLInputElement;
+    fireEvent.click(specifiedAbtestRadio);
+    await mockTimeout();
+    const specifiedAbtestInput = getByPlaceholderText('route-abtest-0-3') as HTMLInputElement;
+    expect(specifiedAbtestInput.value).toBe('cid');
+    expect(container.querySelector('[placeholder="route-weight-0-3"]')).toBeFalsy();
+  });
 });
diff --git a/packages/components/form/_example/form-field-linkage.tsx b/packages/components/form/_example/form-field-linkage.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
-import { Form, Radio, Button } from 'tdesign-react';
+import { Button, Form, Radio } from 'tdesign-react';
 
 const { FormItem } = Form;
 
 export default function FormExample() {
   const [form] = Form.useForm();
-  const setMessage = () => {
+
+  const applyColdPreset = () => {
     form.setFieldsValue({
       type: 'cold',
       ice: '1',
@@ -15,20 +16,31 @@ export default function FormExample() {
   return (
     <Form form={form} colon labelWidth={100}>
       <FormItem label="类型" name="type" initialData="hot">
-        <Radio.Group>
-          <Radio value="hot">热饮</Radio>
-          <Radio value="cold">冷饮</Radio>
+        <Radio.Group variant="default-filled">
+          <Radio.Button value="hot">热饮</Radio.Button>
+          <Radio.Button value="cold">冷饮</Radio.Button>
         </Radio.Group>
       </FormItem>
       <FormItem shouldUpdate={(prev, next) => prev.type !== next.type}>
         {({ getFieldValue }) => {
-          if (getFieldValue('type') === 'cold') {
+          const type = getFieldValue('type');
+          if (type === 'cold') {
+            return (
+              <FormItem label="冰量" key={type} name="ice">
+                <Radio.Group>
+                  <Radio value="normal">正常冰</Radio>
+                  <Radio value="less">少冰</Radio>
+                  <Radio value="none">去冰</Radio>
+                </Radio.Group>
+              </FormItem>
+            );
+          }
+          if (type === 'hot') {
             return (
-              <FormItem label="冰量" key="ice" name="ice">
+              <FormItem label="温度" key={type} name="heat">
                 <Radio.Group>
-                  <Radio value="0">正常冰</Radio>
-                  <Radio value="1">少冰</Radio>
-                  <Radio value="2">去冰</Radio>
+                  <Radio value="high">烫</Radio>
+                  <Radio value="warm">常温</Radio>
                 </Radio.Group>
               </FormItem>
             );
@@ -38,7 +50,7 @@ export default function FormExample() {
       </FormItem>
 
       <FormItem style={{ marginLeft: 100 }}>
-        <Button onClick={setMessage}>选择冷饮-少冰</Button>
+        <Button onClick={applyColdPreset}>选择冷饮-少冰</Button>
       </FormItem>
     </Form>
   );
diff --git a/packages/components/form/form.md b/packages/components/form/form.md
@@ -14,7 +14,7 @@
 
 ### 字段联动的表单
 
-在某些特定场景，例如修改某个字段值后出现新的字段选项、或者纯粹希望表单任意变化都对某一个区域进行渲染。你可以通过 `shouldUpdate` 修改 `FormItem` 的更新逻辑。
+在某些特定场景，例如修改某个字段值后出现新的字段选项、或者纯粹希望表单任意变化都对某一个区域进行渲染。你可以通过 `shouldUpdate` 修改 `FormItem` 的更新逻辑，同时要给具体的 `FormItem` 添加不同的 `key`。
 
 {{ form-field-linkage }}
 
diff --git a/packages/components/form/hooks/useFormItemInitialData.ts b/packages/components/form/hooks/useFormItemInitialData.ts
@@ -76,8 +76,12 @@ export default function useFormItemInitialData(name: NamePath, fullPath: NamePat
       return initialData;
     }
 
-    if (name && formListInitialData?.length) {
-      const defaultInitialData = get(formListInitialData, name);
+    if (Array.isArray(name) && formListInitialData?.length) {
+      let defaultInitialData;
+      const [index, ...relativePath] = name;
+      if (formListInitialData[index]) {
+        defaultInitialData = get(formListInitialData[index], relativePath);
+      }
       if (typeof defaultInitialData !== 'undefined') return defaultInitialData;
     }
 
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap

Original file line number	Diff line number	Diff line change
`@@ -76,8 +76,12 @@ export default function useFormItemInitialData(name: NamePath, fullPath: NamePat`
`76`	`76`	`return initialData;`
`77`	`77`	`}`
`78`	`78`
`79`		`- if (name && formListInitialData?.length) {`
`80`		`- const defaultInitialData = get(formListInitialData, name);`
	`79`	`+ if (Array.isArray(name) && formListInitialData?.length) {`
	`80`	`+ let defaultInitialData;`
	`81`	`+ const [index, ...relativePath] = name;`
	`82`	`+ if (formListInitialData[index]) {`
	`83`	`+ defaultInitialData = get(formListInitialData[index], relativePath);`
	`84`	`+ }`
`81`	`85`	`if (typeof defaultInitialData !== 'undefined') return defaultInitialData;`
`82`	`86`	`}`
`83`	`87`