React动态表单新增字段时name属性被全局覆盖问题求解

旧字段name属性跟着最后一次点击按钮同步变化，核心是三个写法错误：

• 你把按钮点击值存在了全局共享的nameValue状态中，所有输入框渲染时都读取这同一个值，一旦状态更新，所有引用它的DOM属性会同步刷新
• 新增字段存入items数组时，没有把当前点击的按钮值绑定到对应字段的独立属性上，所有字段没有自己的类型标识，只能依赖全局共享的按钮值
• 存在引用类型共享问题：newItemField = {itemDataObject}写法是把同一个对象的引用重复塞进数组，后续修改配置时会出现所有项联动的问题；另外你在map遍历里写的第三个参数e是原数组本身，根本不是事件对象，拿不到目标值。

第一步：调整字段存储结构 #

删掉组件内全局声明的buttonPressed变量，以及单独存按钮值的nameValue状态——不需要全局存按钮值，每个字段自己携带类型标识即可。
把默认字段配置移到组件外部避免重复创建引用，新增字段时直接把当前按钮值、输入值、唯一id存在字段对象自身，同时深拷贝默认配置避免引用联动：

import { useState } from "react";

// 默认配置移到组件外，避免渲染时重复创建引用
const defaultItemData = {
  title_item_lateral: '' ,
  text_item_lateral: [],
  image_lateral: [
    {
      title_image_lateral: '',
      path_image_lateral: '',
    }
  ],
  document_lateral: [],
  links: [
    {
      title_link:'' ,
      link: ''
    }
  ]
};

const DemoLateral = () => {  
  const [items, setItems] = useState([]); 

  const addFields = (e) => {
    const currentType = e.target.value;
    // 每个新字段独立存储自身属性，不依赖全局状态
    const newItem = {
      id: Date.now() + Math.random(), // 生成唯一id当渲染key，避免下标错位
      type: currentType, // 把当前按钮值存在字段自己身上
      value: '', // 存储当前输入框的输入内容
      config: JSON.parse(JSON.stringify(defaultItemData)) // 深拷贝默认配置，避免引用共享
    };
    setItems(prev => [...prev, newItem]);
  };

第二步：修复输入变更逻辑 #

输入变化时只更新对应id的字段值，不影响其他字段：

const handleChange = (itemId, inputValue) => {
    setItems(prev => prev.map(item => {
      if(item.id === itemId) return {...item, value: inputValue};
      return item;
    }));
  };

  const submitForm = (e) => {
    e.preventDefault();
    // 直接从items状态取所有字段数据，不需要遍历DOM
    const formData = items.reduce((acc, cur) => {
      acc[cur.type] = cur.value;
      return acc;
    }, {});
    console.log('提交的表单数据：', formData);
  };

第三步：修复渲染逻辑 #

遍历渲染时每个字段读取自身存的type属性作为name值，完全独立互不干扰：

return (
    <>      
      <h3 className="ms-5 mb-5"> AÑADIR ITEMS   </h3>
      <div className="container">
        <form onSubmit={submitForm} className=''>        
          <div> 
            {items.map((input)=> (
              <div key={input.id}>
                <div className="col-md-1 mb-4">
                  <label htmlFor={`input-${input.id}`} className="form-label text-center" >
                    <h5>{input.type}</h5>
                  </label>              
                </div>
                <div className="row align-items-center row">             
                  <div className='col-10'>
                    <input
                      placeholder="desdeComponent"
                      id={`input-${input.id}`}
                      className='form-control mt-3'                    
                      name={input.type} // 直接读当前字段自身存的type，不依赖全局状态
                      onChange= {(e) => handleChange(input.id, e.target.value)}               
                      type="text"
                      value={input.value}
                      required
                    />
                  </div>             
                </div>
              </div>
            ))}
          </div>
          
          <button className="btn btn-success me-4 mt-5"  type='submit'>AddSubmit</button>
        </form>
        <div className="mt-5 text-center">          
          <button className="btn btn-primary me-4 mb-4" value='text' onClick={addFields}>Add Text</button>
          <button className="btn btn-primary me-4 mb-4" value='title' onClick={addFields}>Add Subtitle</button>
          <button className="btn btn-primary me-4 mb-4" value='image' onClick={addFields}>Add Image</button>
          <button className="btn btn-primary me-4 mb-4" value='document' onClick={addFields}>Add document</button>
          <button className="btn btn-primary me-4 mb-4" value='links' onClick={addFields}>Add Links</button>
          <button className="btn btn-primary me-4 mb-4" value='items' onClick={addFields}>Add Items</button>
        </div>
      </div>
    </>
  );
};

export default DemoLateral;

• 不要用数组下标作为列表渲染的key，增删字段时会导致状态错位，用每个字段独立的唯一id作为key
• 不要在组件渲染函数内声明会被闭包引用的普通变量（比如之前写的let buttonPressed），渲染时变量会被重置，容易出现值错乱，所有和渲染相关的可变数据都存在useState中
• 不需要单独维护全局的按钮值状态，所有字段的属性跟着自身的对象走，就不会出现联动修改的问题。

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