React点击按钮添加输入字段失效问题求助

核心问题 #

字段无法显示的根源是直接修改React状态数组却未使用setFields触发状态更新。React依赖状态更新函数感知变化并触发组件重渲染，直接用push修改原数组不会触发重渲染，所以新添加的字段无法在页面上显示。

关键修复 #

修改addField函数，通过状态更新函数创建新数组并更新状态：

const addField = (event) => {
  event.preventDefault();
  const newFieldId = Math.random().toString(36).substring(2, 15);
  // 生成包含原有字段和新字段的新数组，调用setFields更新状态
  setFields([...fields, { label: "", type: "text", id: newFieldId }]);
};

额外优化（移除按钮逻辑） #

当前移除按钮会删除当前索引及之后的所有字段，若只想删除当前字段，可调整为：

<Button onClick={() => setFields(fields.filter((_, i) => i !== index))}>
  Remove
</Button>

完整修正后的代码 #

"use client";
import React, { useState } from "react";
import { Button } from "../ui/button";

const DynamicForm = () => {
  const [fields, setFields] = useState([]);

  const addField = (event) => {
    event.preventDefault();
    const newFieldId = Math.random().toString(36).substring(2, 15);
    setFields([...fields, { label: "", type: "text", id: newFieldId }]);
  };

  const handleFieldChange = (index, event) => {
    const updatedFields = [...fields];
    updatedFields[index].label = event.target.value;
    setFields(updatedFields);
  };

  const handleTypeChange = (index, event) => {
    const updatedFields = [...fields];
    updatedFields[index].type = event.target.value;
    setFields(updatedFields);
  };

  return (
    <>
      <form>
        <h2>Dynamic Form</h2>
        {fields.map((field, index) => (
          <div key={field.id}>
            <label htmlFor={field.id}>Label: </label>
            <input
              id={field.id}
              name={field.id}
              value={field.label}
              onChange={(e) => handleFieldChange(index, e)}
            />
            <select
              value={field.type}
              onChange={(e) => handleTypeChange(index, e)}
            >
              <option value="text">Text</option>
              <option value="email">Email</option>
            </select>
            <Button onClick={() => setFields(fields.filter((_, i) => i !== index))}>
              Remove
            </Button>
          </div>
        ))}
        <div className="gap-3">
          <Button onClick={addField}>Add Field</Button>
        </div>
      </form>
    </>
  );
};

export default DynamicForm;

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