React中修改Input值后浏览器不显示当前值问题排查

问题原因 #

1. 错误的状态存储逻辑：你直接将JSX元素存在useState中，这违背了React状态管理的核心原则——state应当存储数据而非UI元素。React的设计逻辑是基于数据驱动UI渲染，而非直接保存UI片段。
2. 非受控属性的局限性：defaultValue是Input的非受控属性，仅在组件首次挂载时生效。当你通过setinput替换state里的JSX时，React会尝试复用已存在的input DOM节点，不会重新触发defaultValue的赋值，导致界面显示的还是旧值，即便DevTools里的state已经更新。

解决方案 #

正确的做法是用state存储输入框的值数据，通过数据驱动UI渲染，同时使用受控组件模式保证值的同步：

import { useState } from "react"

export default () => {
  // 存储输入框的值，而非JSX元素
  const [inputValue, setInputValue] = useState(null)

  const AddInput = (name) => {
    setInputValue(name)
  }

  return (
    <>
      {/* 根据数据是否存在渲染输入框，用value实现受控同步 */}
      {inputValue !== null && <input type='text' value={inputValue} />}
      <button onClick={() => AddInput('name1')}>Add input with Name1</button>
      <button onClick={() => AddInput('name2')}>Add input with Name2</button>
    </>
  )
}

补充说明 #

如果坚持使用非受控组件的方式，也可以通过给每个input添加唯一key，让React识别为新组件从而重新挂载，触发defaultValue的更新：

const AddInput=(name)=>{
  setinput(<input type='text' defaultValue={name} key={name} />)
}

但这种方式仍属于不规范的用法，React官方推荐优先使用受控组件来管理表单元素。

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