React表单输入无显示且仅保留最后输入字符问题求助

核心问题分析 #

• 输入框绑定静态初始对象，而非实时状态：你把输入框的value绑定到了userDetails的属性，但userDetails是组件每次渲染都会重新初始化的普通对象，不是React状态。状态更新后，输入框无法感知变化，自然显示不了输入内容。
• 错误解构静态对象：你从userDetails解构属性，而不是从真正的状态变量state解构，导致输入框的value始终是初始空字符串。
• 控制台打印对象错误：你打印的是userDetails而非state，所以永远只能看到初始空对象，看不到更新后的用户输入。

修正后的完整代码 #

function SignUp() {
    // 定义状态的初始值
    const initialUserDetails = {
        displayName: '',
        email: '',
        password: '',
        confirmPassword: ''
    };
    const [state, setState] = useState(initialUserDetails);
    // 从实时状态state中解构属性
    const { displayName, email, password, confirmPassword } = state;
    
    const handleChange = event => {
        const { name, value } = event.target;
        // 函数式setState确保基于最新状态更新
        setState(prevState => ({ ...prevState, [name]: value }));
    };

    // 打印实时状态，查看输入后的更新
    console.log(state);

    return (
        <form className='sign-up-form'>
            <FormInput
                type='text'
                name='displayName'
                value={displayName}
                handleChange={handleChange}
                label='Display Name'
                required 
            />
            <FormInput
                type='email'
                name='email'
                value={email}
                handleChange={handleChange}
                label='Email'
                required 
            />
            <FormInput
                type='password'
                name='password'
                value={password}
                handleChange={handleChange}
                label='Password'
                required 
            />
            <FormInput
                type='password'
                name='confirmPassword'
                value={confirmPassword}
                handleChange={handleChange}
                label='Confirm Password'
                required 
            />
            <CustomButton type='submit'>SIGN UP</CustomButton>
        </form>
    );
}

关键修改说明 #

1. 区分初始值与状态：把原来的userDetails改名为initialUserDetails，明确它只是状态的初始值，避免和实时状态混淆。
2. 绑定实时状态属性：从state解构字段，让输入框的value绑定到实时更新的状态值，这样输入时状态变化会同步反映到输入框上。
3. 打印正确的对象：改为打印state，控制台就能看到每次输入后的状态更新结果。
4. 函数式setState优化：使用prevState参数确保状态更新基于最新值，避免异步更新可能带来的问题，这是React状态更新的推荐写法。
5. 补充完整输入框：按照相同逻辑补充了邮箱、密码等字段的输入框，确保所有用户信息都能正确存入状态。

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