如何在Javascript中从下拉菜单中选择对象的键?

Question

我有一个react页面

myObject = {
1: "objectValue"
}

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

但是当我console.log(myValue)并选择一个选项时，控制台没有任何日志。请问我还能错过什么?

Answer 1

事件处理程序中的setState是在react中批处理的。这意味着您不会立即看到变化。[你已经有了事件对象的值，所以你不需要状态值]

我已经改变了你的代码，你可以看到useEffect控制台工作得很好，而我的事件处理程序中的控制台显示了以前的值。为了证明这一点，我给myObject添加了另一个值。

import React, { useEffect, useState } from 'react';
const myObject = {
1: 'objectValue',
2: 'objectValue2'
};
export default function App() {
const [myValue, setMyValue] = useState('');
useEffect(() => {
console.log("useEffect",myValue);
}, [myValue]);
return (
<select
className="form-control"
id="valueToUse"
onChange={event => {
{
setMyValue(event.target.value);
console.log("EventHandler",myValue);
}
}}
value={myValue}
>
{Object.keys(myObject).map(key => (
<option value={key}> {myObject[key]} </option>
))}
</select>
);
}