React中使用map()动态新增表单字段出现重复渲染如何修复

问题原因 #

你遇到的点击一次新增两个字段的问题，核心是渲染逻辑错误导致的：

• 初始状态input数组默认有1个元素，但你设置了只有input.length !== 1的时候才遍历渲染整个数组，初始状态下第一个输入框完全没有被渲染
• 第一次点击添加按钮后，数组长度变为2，满足渲染条件，直接把数组里的2个元素全部渲染出来，视觉上就像一次新增了2个字段
• 另外还有两个隐藏问题：map的key属性绑定在了内层的Form.Control上，应该绑定在遍历返回的最外层Row元素上；更新状态时直接用现有input可能出现状态合并异常，建议用函数式更新。

修复后的完整代码 #

import { React, useState } from "react";
import { Button, Form, Col, Row } from "react-bootstrap";

const EmployeeName = () => {
  const [input, setInput] = useState([{ empName: "" }]);

  // 用函数式更新确保拿到的是最新的state值
  const AddInputField = () => {
    setInput(prev => [...prev, { empName: "" }]);
  };

  const RemoveInput = (i) => {
    setInput(prev => {
      const inputList = [...prev];
      inputList.splice(i, 1);
      return inputList;
    });
  }
  
  return (
    <>
      {/* 按钮显示逻辑可根据业务需求自行调整，当前配置为始终显示 */}
      <Button style={{ display: "inline" }} onClick={AddInputField}>
        click here to add company employees
      </Button>
      {/* 移除长度限制，所有数组元素都会正常渲染 */}
      {input.map((value, i) => {
        return (
          // key绑定到最外层遍历元素，符合React渲染规范
          <Row key={i}>
            <Col>
              <Form.Group>
                <Form.Control
                  value={value.empName}
                  name="empName"
                  type="text"
                  placeholder="Add Employee Name"
                />
              </Form.Group>
            </Col>
            <Col>
              <Button onClick={AddInputField}>
                Add
              </Button>
              {/* 可选优化：确保至少保留1个输入框，避免全部删除后无法新增 */}
              {input.length > 1 && <Button onClick={() => RemoveInput(i)}>
                Remove
              </Button>}
            </Col>
          </Row>
        );
      })}
    </>
  );
};
export default EmployeeName;

核心修改说明 #

• 删除了渲染输入框前的input.length !== 1判断，初始的第一个输入框就可以正常显示，每次点击添加只会多渲染1个新增的字段
• 将map遍历的key属性移到了返回的最外层Row元素上，避免渲染异常
• 状态更新改为函数式写法，避免异步更新导致拿到旧状态的问题
• 可选优化：删除按钮加了长度判断，确保至少保留1个输入框，不需要可直接删除该判断

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