JavaScript如何从下拉框选对象key？React选中后console.log无输出怎么办

核心问题 #

无输出问题来自几个遗漏点：

• 现有代码没有在正确位置添加console.log执行逻辑
• React状态更新为异步行为，直接在setMyValue后同步打印myValue只能拿到更新前的旧值
• 额外遗漏：代码开头没有引入useState等必要Hook，全局变量myObject没有声明关键字，遍历渲染option缺少key属性会触发React警告

修复方案 #

方案1：直接在onChange事件中打印最新值 #

直接从事件对象中获取选中值后同时执行状态更新和打印：

import React, { useState } from 'react';

const myObject = {
  1: "objectValue"
};

function App() {
  const [myValue, setMyValue] = useState("");
  return (
    <select 
      className="form-control"
      id="valueToUse"
      onChange={(event) => {
        const selectedVal = event.target.value;
        setMyValue(selectedVal);
        console.log(selectedVal); // 直接打印最新选中值
      }}
      value={myValue}
    >
      {Object.keys(myObject).map((key) => (
        <option key={key} value={key}> {myObject[key]} </option>
      ))}
    </select>
  )
}

export default App

方案2：通过useEffect监听状态变化打印 #

如果需要在状态更新完成后执行打印，添加useEffect监听myValue的变化：

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

const myObject = {
  1: "objectValue"
};

function App() {
  const [myValue, setMyValue] = useState("");

  // 监听myValue变化，更新后自动打印最新值
  useEffect(() => {
    console.log(myValue);
  }, [myValue]);

  return (
    <select 
      className="form-control"
      id="valueToUse"
      onChange={(event) => setMyValue(event.target.value)}
      value={myValue}
    >
      {Object.keys(myObject).map((key) => (
        <option key={key} value={key}> {myObject[key]} </option>
      ))}
    </select>
  )
}

export default App

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