React Hooks按钮点击后nam值未更新问题求助（新手）

你的代码存在两个核心问题：

1. 普通变量无法追踪输入状态 #

let nam;是普通JavaScript变量，不属于React状态：

• 组件每次重新渲染时，这个变量会被重新声明并初始化为undefined，根本存不住输入的内容
• 输入框绑定value={nam}后，没有任何逻辑同步输入值到nam，点击按钮时nam依然是undefined，导致disp被设置为空，所以Hello后方显示空白

2. 输入框缺少受控更新逻辑 #

输入框作为受控组件，必须通过onChange事件把用户输入同步到状态中，否则输入内容无法被组件捕获

修复后的代码 #

import React , {useState} from "react";
import ReactDOM from 'react-dom';

const App = () => {
    const [disp, setDisp] = useState(1);
    // 将nam改为React状态变量，初始化为空字符串
    const [nam, setNam] = useState("");

    function prin() {
        setDisp(nam);
    }            

    return(
        <>
        <h1>Hello  {disp}</h1>
        {/* 添加onChange事件，同步输入值到nam状态 */}
        <input 
            type="text" 
            placeholder="Enter Your Name" 
            value={nam}
            onChange={(e) => setNam(e.target.value)}
        />
        <button onClick={prin}> Click Me !</button>
        </>
    )
};
export default App;

相关概念说明 #

• React状态（useState）：用来保存组件需要追踪的可变数据，状态更新会触发组件重新渲染，且React会在多次渲染之间保留状态值
• 受控组件：表单元素的value由React状态控制，同时通过onChange事件更新状态，实现用户输入与组件数据的双向同步，这是React处理表单的标准方式

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