React中useState对象更新问题：handleChange无法正确更新Details状态

你的代码存在几个核心问题导致状态无法按预期更新，以下是具体修复方案：

1. 修复对象键名的语法错误 #

在 JavaScript 对象字面量中，用变量作为属性名时，必须用**方括号[]**包裹（ES6 计算属性名语法）。原代码里e.target.name : e.target.value的写法是无效语法，JS 会把e.target.name当成字面量字符串键名，而非变量对应的属性名。

2. 处理类型匹配问题 #

age和phone定义为数字类型，但<input type="number">的value返回的是字符串，直接赋值会把状态中的数字类型改成字符串，需要根据输入类型做转换。

3. 优化初始值与状态更新逻辑 #

• 初始值phone:0000000000会被 JS 解析为数字0（前导零的数字在 JS 中会被视为八进制，最终转成十进制 0），建议改成字符串'0000000000'或者根据需求用数字类型。
• 当状态更新依赖旧状态时，使用函数式更新（setDetails(prevDetails => {...})），避免闭包导致的旧状态引用问题，确保每次都拿到最新的状态值。

修正后的完整代码 #

function Personal() {
    // 修正phone初始值为字符串，避免被解析为0
    const [Details, setDetails] = useState({ 
        name: 'hahaha', 
        age: 20, 
        phone: '0000000000' 
    });
  
    const handleChange = (e) => {
        const { name, value, type } = e.target;
        // 根据输入类型处理值的类型
        const processedValue = type === 'number' ? Number(value) : value;
        
        // 使用函数式更新，确保拿到最新的旧状态
        setDetails(prevDetails => ({
            ...prevDetails,
            [name]: processedValue
        }));
    }
  
    return (
        <div className='personal-details'>
            <h2>Personal Details</h2>
            {/* 绑定value，让输入框与状态双向同步 */}
            <input type="text" name='name' value={Details.name} onChange={handleChange}/>
            <input type="number" name='age' value={Details.age} onChange={handleChange}/>
            <input type="number" name='phone' value={Details.phone} onChange={handleChange}/>
        </div>
    )
}

额外说明 #

• 给输入框绑定value属性，实现受控组件，确保输入框的显示与状态完全同步，避免出现输入框内容与状态不一致的情况。
• 如果phone需要保留前导零，必须用字符串类型存储，因为数字类型无法保留前导零；如果不需要前导零，直接用数字类型即可，转换时用Number(value)。

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