React useState始终返回旧值：下拉选择无法实时获取当前值

问题原因 #

1. useState的异步特性：调用setPostsPerPage后，React不会立刻更新postsPerPage的状态值，所以紧接着的console.log(postsPerPage)输出的还是更新前的旧值。
2. 不必要的DOM操作：通过document.getElementById获取下拉框值不符合React的状态管理逻辑，React推荐通过事件对象直接获取表单控件的值。

解决方案 #

步骤1：移除DOM操作，从事件对象获取值

直接使用event.target.value获取当前选中的下拉框值，这是React处理表单控件的标准方式：

import { useState } from 'react';

const [postsPerPage, setPostsPerPage] = useState(15);

const handleChange = (event) => {
    const data = event.target.value;
    setPostsPerPage(data);
    // 要立刻查看选中的值，直接log data即可
    console.log("当前选中值：", data);
};

// 组件渲染部分
return (
    <>
        <span>Rows Per Page</span>
        <select
            id="dropzonee"
            name="changedValue"
            onChange={handleChange}
            value={postsPerPage}
        >
            <option value="5">5</option>
            <option value="10">10</option>
            <option value="15">15</option>
        </select>
    </>
);

步骤2：监听状态变化获取最新值

如果需要在状态更新完成后执行逻辑（比如根据新值发起请求），可以使用useEffect钩子监听postsPerPage的变化：

import { useState, useEffect } from 'react';

const [postsPerPage, setPostsPerPage] = useState(15);

const handleChange = (event) => {
    const data = event.target.value;
    setPostsPerPage(data);
};

// 监听postsPerPage变化，状态更新后触发
useEffect(() => {
    console.log("更新后的postsPerPage：", postsPerPage);
    // 这里可以写需要用最新值执行的逻辑，比如分页请求
}, [postsPerPage]); // 依赖数组，只有postsPerPage变化时才执行

关键说明 #

• React的状态更新是批量异步的，这是为了优化性能，所以不要期望调用setter后立刻拿到新状态。
• 始终通过React的事件对象或状态管理来获取表单值，避免直接操作DOM，保持组件的可维护性和一致性。

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