React动态添加患者表单字段数据无法捕获问题求助

你遇到的"无法添加属性fullName，对象不可扩展"错误，核心原因是把React元素（JSX）直接存入了状态数组，而非存储患者数据对象。React元素是不可扩展的内置对象，当你试图给它添加fullName这类自定义属性时，自然会抛出错误。

1. 修正状态管理逻辑 #

状态patients应该只存储纯数据对象，不要混入UI元素。替换原newPatientField函数，改为添加空的患者数据结构：

// 替换原newPatientField函数
const addNewPatient = () => {
  setPatients(prevPatients => [...prevPatients, { fullName: '', cns: '' }]);
};

2. 保留正确的渲染逻辑 #

你原本的map渲染逻辑是对的——基于状态数据生成UI，不需要把JSX提前存入状态，直接保留这段代码即可：

{patients.map((patient, index) => (
  <div
    key={index} // 注意：如果列表频繁增删，建议用患者唯一ID当key，index仅作临时替代
    className='flex gap-4 mb-4'>
    <Input
      type='text'
      className='border'
      placeholder='Nome completo'
      value={patient.fullName}
      onChange={(e) => {
        setPatients(prevPatients => {
          const newPatients = [...prevPatients];
          newPatients[index] = { ...newPatients[index], fullName: e.target.value };
          return newPatients;
        });
      }}
    />
    <Input
      type='number'
      className='border'
      placeholder='CNS'
      value={patient.cns}
      onChange={(e) => {
        setPatients(prevPatients => {
          const newPatients = [...prevPatients];
          newPatients[index] = { ...newPatients[index], cns: e.target.value };
          return newPatients;
        });
      }}
    />
  </div>
))}

这里用了函数式更新setPatients(prev => ...)，避免闭包捕获旧状态导致的更新异常，比直接复制数组更安全。

3. 修正按钮交互逻辑 #

移除多余的handleNewPatient和newPatientField调用，直接绑定新的addNewPatient函数，同时简化移除按钮的逻辑：

<div className='flex flex-row gap-4'>
  <button
    type='button'
    onClick={addNewPatient}
    className={`bg-blue-500 text-white font-bold py-2 px-4 rounded shadow-md ${patients.length > 1 ? 'w-2/3' : 'w-full'}`}>
    Adicionar novo paciente
  </button>
  {patients.length > 1 && (
    <button
      type='button'
      onClick={() => setPatients(prev => prev.slice(0, -1))}
      className='bg-red-500 text-white font-bold py-2 px-4 rounded shadow-md w-1/3'>
      Remover último paciente
    </button>
  )}
</div>

• 状态数组始终存储纯数据对象，可正常修改fullName、cns属性
• UI完全由状态驱动，新增/移除患者时自动同步渲染
• 函数式更新避免了状态更新的闭包陷阱，保证数据准确性

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