React中useState无法存储输入框最后一个字符的问题求助

问题根源 #

你的代码存在几个关键错误，直接导致输入框值与状态不同步：

• handleChange函数参数定义错误：React的onChange回调接收的是事件对象e，而非直接传入value，这会导致后续访问e.target时出现异常。
• 输入框value绑定错误：selectedData是对象类型，直接绑定会让输入框无法正确读取phone字段的值，必须指定绑定selectedData.phone（加|| ''避免初始为空时显示undefined）。
• 同步打印状态无法获取新值：React的setState是异步操作，你在更新后立即打印selectedData，只能拿到更新前的旧值。

修复后的代码 #

import React, { useState } from 'react'

export const terr = () => {
    const [selectedData, setSelectedData] = useState({})

    const handleChange = (e) => {
        const { name, value } = e.target;
        console.log(`输入的值: ${value}`);
        setSelectedData(prevState => ({
            ...prevState,
            [name]: value
        }));
    };

    return (
        <div>
            <input 
                name="phone" 
                value={selectedData.phone || ''} 
                onChange={handleChange} 
            />
        </div>
    )
}

额外说明 #

如果需要在状态更新后执行逻辑（比如打印最新状态），可以用useEffect监听状态变化：

import React, { useState, useEffect } from 'react'

export const terr = () => {
    const [selectedData, setSelectedData] = useState({})

    const handleChange = (e) => {
        const { name, value } = e.target;
        setSelectedData(prevState => ({
            ...prevState,
            [name]: value
        }));
    };

    useEffect(() => {
        console.log(`更新后的selectedData: `, selectedData);
    }, [selectedData]);

    return (
        <div>
            <input 
                name="phone" 
                value={selectedData.phone || ''} 
                onChange={handleChange} 
            />
        </div>
    )
}

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