使用React JS Ant Design无法添加学生列表问题排查

你的代码存在两个核心问题，导致添加学生按钮无效果：

1. 未使用Ant Design的Form组件包裹表单项
   Antd的Form.List必须依赖Form组件的上下文环境才能正常工作，它需要借助Form内部的状态管理来实现表单项的动态添加/删除。你目前用原生<form>标签代替了Antd的<Form>组件，直接导致Form.List无法获取表单状态，点击添加按钮自然没有反应。

2. 原生form标签干扰逻辑
   原生<form>标签会和Antd Form的内部逻辑冲突，必须替换为Antd官方提供的Form组件。

修复后的完整代码 #

import React from "react";
import './App.css';
import "antd/dist/antd.css";
import { Form, Input, Button } from "antd";
import { PlusCircleOutlined } from '@ant-design/icons';

function App() {
  // 创建表单实例，用于统一管理表单状态
  const [form] = Form.useForm();
  
  return (
    <div className="App">
      <h2>Dynamic Form Dengan Validasi</h2>
      {/* 用Antd的Form组件替换原生form，绑定表单实例 */}
      <Form form={form}>
        <Form.Item name={"teacher"} label="Teacher Name">
          <Input placeholder="Teacher Name"></Input>
        </Form.Item>
        <Form.Item name={"class"} label="Class Name">
          <Input placeholder="Class"></Input>
        </Form.Item>
        <Form.List name={"students"}>
          {(fields, {add, remove}) => (
            <>
              {fields.map((field, index)=>{
                return (
                  <Form.Item 
                    key={field.key} // 添加key解决React列表渲染警告
                    name={[field.name,"first"]} 
                    label={`${index + 1}-Student`}
                  >
                    <Input placeholder="First Name"></Input>
                  </Form.Item>
                );
              })}
              <Form.Item>
                <Button 
                  icon={<PlusCircleOutlined />} 
                  type="dashed" 
                  block 
                  onClick={() => add()}
                >
                  Add A Student
                </Button>
              </Form.Item>
            </>
          )}
        </Form.List>
      </Form>
    </div>
  );
}

export default App;

关键改动说明 #

• 新增const [form] = Form.useForm();创建表单实例，绑定到Antd的<Form>组件上，让所有表单项共享统一状态。
• 替换原生<form>为Antd的<Form form={form}>组件，提供Form.List所需的上下文环境。
• 给Form.List循环渲染的表单项添加key={field.key}，解决React列表渲染的警告问题。

修改后点击添加按钮，就能正常动态生成学生输入框了。

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