如何在useEffect中重置TextField值 解决切换状态后默认值不生效问题

问题根本原因 #

你推测的方向是对的，React 中非受控组件的 defaultValue 仅在组件首次挂载渲染时生效，后续组件重渲染时如果组件没有被销毁重建，即使 defaultValue 绑定的变量变化，输入框的展示值也不会同步更新。你手动修改输入框内容后，相当于直接修改了 DOM 节点的 value 属性，和 defaultValue 就彻底脱钩了。

解决方案 #

方案1：给 TextField 添加 key 属性（代码改动最小，优先推荐） #

直接给 TextField 绑定 key={currentTodoId}，当你切换条目 currentTodoId 变化时，React 会判定这是一个全新的组件，会销毁旧组件重新挂载新组件，自然会读取新的 defaultValue 渲染。
代码修改示例：

<TextField
  key={currentTodoId} // 新增这一行即可
  id="noteTodo"
  label="Note"
  onBlur={()=>updateTodoNote()}
  onKeyPress={(e)=>keypressUpdateTodoNote(e)}
  multiline={true}
  defaultValue={currentTodo?.note ? currentTodo.note : ""}
  inputRef ={noteRef}
  size="medium"
  className={classes.remember}
  variant="outlined"
  rows={5}
/>

优点：仅需新增一行代码，完全不需要改动现有逻辑。

方案2：改为受控组件（可控性最高，适合复杂交互场景） #

如果你后续需要对输入内容做实时校验、限制输入等操作，推荐改成受控组件，显式绑定 value 和 onChange：

1. 新增本地状态存储输入框临时值
2. 用 useEffect 监听 currentTodo 变化，同步更新本地状态
3. TextField 绑定 value 和 onChange
   代码示例：

const Rightbar: React.FC<rightbarProps> = ({ currentTodoId }) => {
  const todos  = useSelector((state:RootState)=>
    state.todo.todos.filter((todo=>todo.id === currentTodoId))
  );
  const currentTodo = todos[0]
  // 新增本地状态存输入值
  const [noteValue, setNoteValue] = useState('')

  // 切换todo时同步更新输入框值
  useEffect(() => {
    setNoteValue(currentTodo?.note || '')
  }, [currentTodo])

  // ......其他代码

  return <TextField
    id="noteTodo"
    label="Note"
    onBlur={()=>updateTodoNote(noteValue)} // 传最新值给更新方法
    onKeyPress={(e)=>keypressUpdateTodoNote(e, noteValue)}
    multiline={true}
    value={noteValue} // 替换defaultValue为value
    onChange={(e) => setNoteValue(e.target.value)} // 新增onChange同步本地状态
    size="medium"
    className={classes.remember}
    variant="outlined"
    rows={5}
  />
}

方案3：用 ref 手动更新输入框值（匹配你最初的思路） #

如果你不想改动现有非受控组件的逻辑，可以用你想到的 useEffect + ref 的方案实现：

useEffect(() => {
  // 切换currentTodo时，手动把输入框值重置为最新的note值
  if (noteRef.current) {
    noteRef.current.value = currentTodo?.note || ''
  }
}, [currentTodo]) // 依赖项为currentTodo，切换条目时触发

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