React状态仅获取输入框首字符问题求助

问题根源 #

1. 状态更新的异步特性：React的setState是异步批量处理的，快速输入时直接引用newStudent会拿到旧的状态值，导致后续输入无法基于最新状态更新。
2. 对象展开顺序错误：原代码中先设置[name]: value再展开newStudent，旧状态的字段会覆盖刚设置的新值，结合异步特性进一步加剧了问题。

解决方案 #

使用函数式更新获取最新状态，调整对象展开顺序确保新值覆盖旧字段，同时完善受控组件的value绑定：

export const Form = ({addStudent}) => {
    const [newStudent, setNewStudent] = useState({school:"university"})
    const updateValue = e => {
        const { name, value } = e.target;
        // 函数式更新，基于最新状态修改
        setNewStudent(prevState => ({
            ...prevState,
            [name]: value
        }));
    }

    return (
        <section>
            <p>First Name</p>
                <input type="text" name="firstName"
                    onChange={updateValue}
                    value={newStudent.firstName || ''}
                />
            <p>Last Name</p>
                <input type="text" name="lastName"
                    onChange={updateValue}
                    value={newStudent.lastName || ''}
                />
            <label>Choose a school:</label>
                <select name="school"
                    onChange={updateValue}
                    value={newStudent.school}
                >
                    <option value="university">university</option>
                    <option value="highSchool">High School</option>
                </select>
            <button onClick={() => addStudent(newStudent)}>
                Add new Student
            </button>
        </section>
  )
}

修改说明 #

• 函数式更新：通过prevState获取React维护的最新状态，确保每次更新都基于当前最新值，彻底解决异步更新导致的状态不一致问题。
• 调整展开顺序：先展开旧状态...prevState，再设置新字段值，保证新值能正确覆盖对应字段。
• 受控组件绑定：给所有输入控件加上value属性，让输入框的显示值完全同步于state，这是React表单开发的标准做法，避免输入与状态脱节。

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