ReactJS中动态生成Select下拉框提交时无法设置默认值的问题

问题原因 #

你遇到的控制台打印旧值的问题，核心是React的setState是异步更新的。调用setCourse后，组件状态不会立刻更新，所以紧接着的console.log(course.category)拿到的还是更新前的初始空值。

正确解决方案 #

1. 提交时正确获取更新后的值

直接用提前定义好的默认值变量，而非依赖尚未更新的course状态：

const handleCourseSubmit = async e => {
    e.preventDefault();
    // 先判断分类数组是否有数据，避免报错
    if (!categories.length) return;

    const defaultCategory = categories[0].categoryName;
    // 更新状态
    setCourse(prevState => ({ ...prevState, category: defaultCategory }));

    // 直接使用提前定义的defaultCategory，而非course.category
    console.log('create.js:: handleCourseSubmit:: data: ', defaultCategory);

    // 提交后端等后续逻辑也直接用defaultCategory即可
    // await submitCourseApi({ ...course, category: defaultCategory });
};

2. 优化：页面加载时提前设置默认值

更好的体验是在分类数据加载完成后，直接给Select设置默认值，不用等到提交时处理：

import { useEffect } from 'react';

// 监听分类数据变化，自动设置默认值
useEffect(() => {
    if (categories.length && !course.category) {
        setCourse(prev => ({ ...prev, category: categories[0].categoryName }));
    }
}, [categories, course.category]);

3. 修复Select组件的option绑定

原代码中<option>未设置value属性，会导致Select选中状态与绑定值不匹配，需显式设置：

<select className="form-control"
    name="category"
    value={course.category}
    onChange={handleChange}>
    {categories.map((category) => (
        <option 
            key={category._id} 
            value={category.categoryName}  {/* 新增该行，与Select的value对应 */}
            data-id={category._id}
        >
            {category.categoryName}
        </option>
    ))}
</select>

注意事项 #

• 务必确保categories数组在使用前已加载完成，避免categories[0]为undefined引发报错。
• 如果表单提交逻辑严格依赖更新后的course状态，可在setCourse的回调中执行提交，或用useEffect监听course变化触发后续操作。

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