如何解决Ant Design Form动态多行中组件类型全局变更问题？

核心问题是你当前大概率用了全局变量（比如单个state）控制所有行的组件类型，导致切换某一行的param时，所有行同步变更。正确做法是让每一行的组件类型依赖于该行自身的param字段值，而非全局状态。

具体实现步骤 #

1. 移除全局状态：删掉用来控制组件类型的全局state（比如componentType这类变量）。
2. 基于当前行param值判断组件：渲染每一行第三个元素时，直接从当前行的表单数据中取出param值，根据这个值动态渲染对应的Input或Select组件。
3. 利用Form.List字段值隔离状态：在Form.List的renderItem回调中，通过getFieldValue获取当前行的param值，确保每一行的判断逻辑独立。

示例代码片段 #

<Form.List name="rows">
  {(fields, { add, remove }) => (
    <>
      {fields.map(({ key, name, ...restField }) => (
        <div key={key} style={{ display: 'flex', gap: '8px', marginBottom: '12px' }}>
          <Form.Item
            {...restField}
            name={[name, 'param']}
            rules={[{ required: true, message: '请选择参数' }]}
          >
            <Select
              options={[
                { label: 'param-1', value: 'param1' },
                { label: 'param-2', value: 'param2' }
              ]}
              placeholder="选择参数"
            />
          </Form.Item>
          {/* 动态渲染的第三个组件 */}
          <Form.Item
            name={[name, 'value']}
            rules={[{ required: true, message: '请填写内容' }]}
          >
            {() => {
              const form = Form.useFormInstance();
              const currentParam = form.getFieldValue([name, 'param']);
              
              if (currentParam === 'param1') {
                return <Input placeholder="请输入文本" />;
              } else if (currentParam === 'param2') {
                return (
                  <Select
                    options={[
                      { label: '选项A', value: 'optionA' },
                      { label: '选项B', value: 'optionB' }
                    ]}
                    placeholder="选择选项"
                  />
                );
              }
              return <Input placeholder="请先选择参数" disabled />;
            }}
          </Form.Item>
          <Button onClick={() => remove(name)} danger>删除</Button>
        </div>
      ))}
      <Button type="primary" onClick={() => add({ param: '', value: '' })}>添加行</Button>
    </>
  )}
</Form.List>

关键说明 #

• 通过Form.useFormInstance().getFieldValue([name, 'param'])精准获取当前行的param值，确保每一行的组件渲染逻辑完全独立。
• 无需额外维护全局状态，完全依赖表单自身的字段值驱动组件渲染，从根源上避免了行与行之间的状态干扰。

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