React Select菜单值显示异常：控制台输出[object Object]问题排查

核心问题分析 #

1. Alert函数使用错误
   alert()仅支持接收单个字符串参数，你当前传入多个参数的写法无效，只会显示第一个参数内容，后续的状态值会被直接忽略。

2. 错误访问不存在的属性
   你的Menu组件传递给父组件的是字符串类型的选中值（如"1"、"2"），但在Replay组件的回调中，你尝试访问value.name——字符串没有name属性，导致firstActivity和secondActivity始终为undefined，这就是控制台输出异常、弹窗显示不符合预期的根本原因。

修复后的代码 #

Replay组件

function Replay() {
    // 给状态设置初始值，和Menu组件的defaultValue保持一致
    const [firstActivity, setFirstActivity] = useState("1"); 
    const [secondActivity, setSecondActivity] = useState("1"); 

    const handleFirstChange = (value) => {
        console.log("第一个菜单选中值：", value);
        // 直接赋值Menu传递的字符串值
        setFirstActivity(value);
    }

    const handleSecondChange = (value) => {
        setSecondActivity(value);
    }

    const handleClick = () => {
        // 用模板字符串拼接所有内容，作为单个参数传入alert
        alert(`选中的值是：${firstActivity}, ${secondActivity}`);
    }

    return (
        <div className='top-container'>
            <button onClick={handleClick}>获取选中值!</button>
            <div className='container'>
                <Menu onChange={handleFirstChange} />
                <Menu onChange={handleSecondChange} />
            </div>
        </div>
    )
}

export default Replay;

Menu组件（无需修改，仅确认逻辑）

import React, {useContext} from 'react';
import { GlobalContext } from "./Store";

function Menu(props) {
    const [activities] = useContext(GlobalContext);
   
    const handleMenuChange = (evt) => {
        console.log("菜单选中值：", evt.target.value);
        props.onChange(evt.target.value);
    }

    const createOptions = (
        <>           
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </>
    )

    return (
        <div className="container">
            <select 
                className="select"
                defaultValue="1"
                onChange={handleMenuChange}
            >
                {createOptions} 
            </select>
        </div>
    );
}

export default Menu;

修复效果验证 #

• 菜单选中值变更时，控制台会正确输出字符串类型的选中值
• 点击按钮后，Alert弹窗会同时显示两个菜单的选中值
• 初始状态下，弹窗会显示默认的选中值"1, 1"

内容的提问来源于stack exchange，提问作者program.exe