Ant Design中Form.Item的shouldUpdate功能异常问题咨询

官方文档说明 #

当shouldUpdate为true时，任何Form更新都会触发Form.Item重渲染，适用于自定义渲染场景，示例代码如下：

<Form.Item shouldUpdate>
  {() => {
    return <pre>{JSON.stringify(form.getFieldsValue(), null, 2)}</pre>;
  }}
</Form.Item>

实际遇到的问题 #

• 设置shouldUpdate={true}时，Form.Item并未触发重渲染
• 将shouldUpdate设为判断函数，函数能正常执行，但返回true时子组件依然不更新

问题原因与解决方案 #

1. 必须使用函数式子组件
   shouldUpdate生效的前提是Form.Item的子元素为函数式组件，只有函数式子组件会在Form.Item触发更新时重新执行，生成新的JSX内容。如果直接传入普通JSX元素，即便shouldUpdate触发，也不会更新内容。

2. 确保Form实例正确绑定
   确认useForm获取的form实例与当前Form组件通过form属性绑定，避免作用域导致的实例不匹配问题。

3. 避免版本bug
   部分旧版本Ant Design存在shouldUpdate的逻辑bug，建议升级到最新稳定版本（v4.x或v5.x的最新版）。

修正后的示例代码 #

import { Form, Input, Button } from 'antd';
import { useForm } from 'antd/es/form/Form';

export default function App() {
  const [form] = useForm();

  return (
    <Form form={form} layout="vertical">
      <Form.Item label="Name" name="name">
        <Input />
      </Form.Item>
      <Form.Item label="Age" name="age">
        <Input type="number" />
      </Form.Item>
      {/* 正确使用shouldUpdate + 函数式子组件 */}
      <Form.Item shouldUpdate>
        {() => (
          <pre>{JSON.stringify(form.getFieldsValue(), null, 2)}</pre>
        )}
      </Form.Item>
      <Form.Item>
        <Button type="primary" onClick={() => form.setFieldValue('name', 'Test')}>
          设置名称
        </Button>
      </Form.Item>
    </Form>
  );
}

自定义更新条件的正确写法 #

如果需要根据特定字段变化触发更新，使用函数式shouldUpdate时要确保正确对比前后值：

<Form.Item 
  shouldUpdate={(prevValues, currentValues) => {
    // 仅当name字段变化时触发重渲染
    return prevValues.name !== currentValues.name;
  }}
>
  {() => <div>当前名称：{form.getFieldValue('name')}</div>}
</Form.Item>

内容的提问来源于stack exchange，提问作者Plumpie