如何从 Javascript 的下拉列表中选择对象的键答案

【问题标题】：How do I select the key of an object from a dropdown in Javascript如何从 Javascript 的下拉列表中选择对象的键
【发布时间】：2021-10-30 13:35:03
【问题描述】：

我有一个反应页面

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) 并选择一个选项时，控制台上没有任何日志。请问我可能缺少什么？

【问题讨论】：

缺少一些学习！！！ useState 应该在你的函数下，带有一个小 f。
你能发布你的实际代码吗？如果那是你的代码，你可能想看看反应代码的典型结构。
@SanishJoseph 已编辑。输入问题时出错
lgtm，控制台有错误吗？您应该看到 1 作为输出
我想我知道发生了什么。我将其添加为答案。

标签： javascript html reactjs use-state

【解决方案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>
  );
}

【讨论】：