React输入框文本不更新求助：输入内容无法同步到h3标签

问题描述 #

我想实现输入框输入文本时，对应的h3标签内容同步更新。设置了三个带onChange属性的输入框，onChange会更新本地state，提交表单时触发父组件（App）的updateEmployee回调，但实际更新效果不符合预期。

错误原因分析 #

1. updateEmployee函数逻辑错误 #

在updateEmployee里使用map遍历员工数组时，犯了两个关键错误：

• 匹配到目标id的员工时，错误地展开了整个父组件state（数组），而非当前遍历的单个员工对象，导致替换后的结构完全错误
• 未匹配到目标id时，返回的是整个state数组，而非当前遍历的员工对象，最终数组里的每一项都会变成原数组的引用，完全破坏了数据结构

2. 实时同步需求未满足 #

当前EditEmployee组件维护了本地state2，只有点击提交按钮才会触发父组件更新，无法实现输入时实时同步h3内容的需求。

修复方案 #

步骤1：修正updateEmployee函数 #

将map中的逻辑改为针对单个员工对象的正确更新：

function updateEmployee (id, newName){
  const updatedEmployees = state.map((item)=>{
    if(id === item.id){
      // 展开当前员工对象，仅覆盖name字段
      return {...item, name: newName}
    }
    // 未匹配时返回原员工对象
    return item;
  })
  setState(updatedEmployees);
}

步骤2：实现输入实时同步 #

如果需要输入时就同步更新h3，不需要本地临时state，直接让输入框受控于父组件传递的name，onChange时立即调用updateEmployee：

function EditEmployee({name, id, updateEmployee}){
  return (
    <div>
      <input 
        type="text"
        value={name}
        onChange={(e)=>{updateEmployee(id, e.target.value)}}
      />
    </div>
  )
}

（如果需要保留提交按钮确认的逻辑，可保留本地临时state，但输入时不会实时同步h3，只有提交后才会更新）

修复后的完整代码 #

const App = ()=>{
  const [state, setState] = useState([{
    id:1,
    name:'Name1',
    role: 'Role1'
  },{
    id:2,
    name:'Name2',
    role:"Role2"
  },{
    id:3,
    name:'Name3',
    role:"Role3"
  }])

  function updateEmployee (id, newName){
    const updatedEmployees = state.map((item)=>{
      if(id === item.id){
        return {...item, name: newName}
      }
      return item;
    })
    setState(updatedEmployees);
  }

  return (
    <div>
      {state.map(data=>(
        <Employee 
          name={data.name} 
          id={data.id}
          key={data.id}
          updateEmployee={updateEmployee}
        />
      ))}
    </div>
  )
}    

function Employee({name, id, updateEmployee}){
  return(
    <div>
      <h3><u>{name}</u></h3>
      <EditEmployee 
        name={name} 
        id={id}
        updateEmployee={updateEmployee}
      />
    </div>
  )
}    

// 实时同步版本的EditEmployee
function EditEmployee({name, id, updateEmployee}){
  return (
    <div>
      <input 
        type="text"
        value={name}
        onChange={(e)=>{updateEmployee(id, e.target.value)}}
      />
    </div>
  )
}

// 如果需要保留提交按钮版本，用下面的代码：
/*
function EditEmployee({name, id, updateEmployee}){
  const [tempName, setTempName] = useState(name);

  function finalize(e){
    e.preventDefault();
    updateEmployee(id, tempName);
  }

  return (
    <div>
      <form onSubmit={finalize}>
        <input 
          type="text"
          value={tempName}
          onChange={(e)=>{setTempName(e.target.value)}}
        />
        <button>Update</button>
      </form>
    </div>
  )
}
*/

内容的提问来源于stack exchange，提问作者M Hassan khan