React数组状态下动态表单输入值覆盖与数据纠缠问题求助

我正在开发一款可添加多表单的动态CV应用，预期每个表单能独立展示自身数据，但在处理React数组状态时遇到了问题。

原代码 #

function App() {

  const [inputs, setinputs] = React.useState([])
  const [output, setOutput] = React.useState([])

  function Input(props){
    return (
      <div className='form'>
        <input
        type="text"
        id='name'
        name = "name"
        value = {props.name}
        placeholder="Name"
        onChange={props.handleChange}
        />
        <input
        type="text"
        id='age'
        name = "age"
        value = {props.age}
        placeholder="Age"
        onChange={props.handleChange}
        />
      </div>
    )
  }

  function handlechange(e){
    setOutput([
      ...output,
      {
        [e.target.name]: e.target.value
      }
    ])
  }

  function addInput(){
    setinputs([
      ...inputs,
      <Input
      name={output.name}
      age = {output.age}
      handleChange={handlechange}
      />
    ])

  }

  return (
    <div className="App">
      
      <div className='inputs'>
        <h2>Inputs:</h2>
      {inputs}
      </div>
      

        <button
        onClick={addInput}
        >Add Input</button>

      <div className='outputs'>
      <h2>Outputs:</h2>

        {output.map(item => {
          return (
            <div className='card'>
            <h1>Name: {item.name}</h1>
            <h4>Age: {item.age}</h4>
            </div>
            
          )
          
        })}
      </div>

    </div>
  );
}

遇到的问题 #

• 问题1：修改一个输入框的值会覆盖另一个输入框的值，比如先输入姓名John，再输入年龄后姓名就消失了。
• 问题2：添加多个表单后，各表单的值会相互纠缠，无法为每个表单生成独立的展示卡片；该问题仅在批量添加表单后填充时出现，逐个添加并填充则不会，但仍存在第一个问题。

问题根源 #

1. 状态存储逻辑错误：output数组存储的是单个键值对（比如{name: 'John'}），而非完整的表单对象，导致每次输入都新增条目，渲染时无法获取同一条目的name和age。
2. 组件存储方式错误：直接把<Input>组件实例存入inputs数组，而非存储表单数据，多个表单共享同一状态，必然出现值纠缠。
3. 缺少表单唯一标识：没有为每个表单分配唯一ID，无法定位具体表单更新对应数据。

修复后代码 #

function App() {
  // 存储所有表单的完整数据，每个条目带唯一ID
  const [formEntries, setFormEntries] = React.useState([]);

  // 生成唯一ID（简单实现，生产环境可替换为uuid库）
  const generateId = () => Date.now() + Math.random();

  // 添加新表单时，初始化空条目
  function addInput() {
    setFormEntries(prev => [
      ...prev,
      { id: generateId(), name: '', age: '' }
    ]);
  }

  // 根据表单ID定位更新对应数据
  function handleChange(id, e) {
    const { name, value } = e.target;
    setFormEntries(prevEntries => 
      prevEntries.map(entry => 
        entry.id === id ? { ...entry, [name]: value } : entry
      )
    );
  }

  // Input组件接收对应条目数据和处理函数
  function Input({ entry, handleChange }) {
    return (
      <div className='form'>
        <input
          type="text"
          name="name"
          value={entry.name}
          placeholder="Name"
          onChange={(e) => handleChange(entry.id, e)}
        />
        <input
          type="text"
          name="age"
          value={entry.age}
          placeholder="Age"
          onChange={(e) => handleChange(entry.id, e)}
        />
      </div>
    );
  }

  return (
    <div className="App">
      <div className='inputs'>
        <h2>Inputs:</h2>
        {/* 遍历数据渲染每个表单 */}
        {formEntries.map(entry => (
          <Input key={entry.id} entry={entry} handleChange={handleChange} />
        ))}
      </div>

      <button onClick={addInput}>Add Input</button>

      <div className='outputs'>
        <h2>Outputs:</h2>
        {/* 遍历完整数据渲染展示卡片 */}
        {formEntries.map(entry => (
          <div key={entry.id} className='card'>
            <h1>Name: {entry.name || '未填写'}</h1>
            <h4>Age: {entry.age || '未填写'}</h4>
          </div>
        ))}
      </div>
    </div>
  );
}

关键修复说明 #

• 状态结构优化：用formEntries存储每个表单的完整数据（id、name、age），每个条目对应独立表单，解决值覆盖问题。
• 不存储组件实例：改为存储数据，渲染时通过map生成组件，确保每个组件绑定专属数据。
• 唯一ID区分表单：每个表单分配唯一ID，更新时精准定位条目，实现独立控制。
• 函数式更新：使用setFormEntries(prev => ...)基于最新状态更新，避免批量操作时的状态不一致。

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