Javascript 在下拉框中选择时，选项值不显示

我正在尝试解决一个我无法解决的问题。问题是，我有一个下拉框，其中有一个select标签和一些菜单项。当我单击其中一个菜单项时，该值不会出现在选择框中，它只是空的。但是，当我在控制台上记录所选项目时，我可以看到我正在选择的菜单项。代码如下：

<Select labelId="demo-simple-select-label" id="demo-simple-select" value={selectedMake} onChange={handleMake}>
              {console.log(makes)}
              {makes &&
                makes.map((select, key) => (
                  <MenuItem key={key} value={select}>
                      {console.log(select)}
                    {select.name}
                  </MenuItem>
                ))}
            </Select>

我不知道为什么选择本田时，它没有显示在框中。我想这可能与身份证有关。一定要让我知道如何解决这个问题

这也是handleMake函数，它是作为道具从另一个文件传入的函数：

handleMake = (event) => {
    this.setState({
      selectedMake: event.target.value.name,
      selectedMakeId: event.target.value.id,
    });
  };

问题 对象不能是选择选项的值，它必须是非对象值。在中，您将选项值设置为整个“make

对象，但将

Select

值设置为*just*make的

name`属性，该属性将永远不匹配

handleMake = (event) => {
  this.setState({
    selectedMake: event.target.value.name, // <-- make's name
    selectedMakeId: event.target.value.id,
  });
};

...

<Select
  labelId="demo-simple-select-label"
  id="demo-simple-select"
  value={selectedMake} // <-- only a make's name
  onChange={handleMake}
>
  {makes.map((select, key) => (
    <MenuItem key={key} value={select}> // <-- entire make object!
      {select.name}
    </MenuItem>
  ))}
</Select>

要使用

selectedMake

进行处理，例如，如果

selectedMake

==

0

：

makes[selectedMake] // { name: "Honda", id: "5de9c553bce4b703a335c204"}

示例组件

函数应用程序（）{
常量[selectedMake，setSelectedMake]=useState（-1）；
constchangehandler=（e）=>setSelectedMake（e.target.value）；
useffect（（）=>{
log（selectedMake，make[selectedMake]）；
}，[selectedMake]）；
返回(
制作
{make.map（（make，i）=>(
{make.name}
))}
);
}

尝试将select.id作为值传递给@WilliamWang，但仍然没有显示必须返回的值。在传递值={select.id}之前使用

return

对象不能是select选项的值，您需要使用

name

或

id

属性。能否提供更完整的代码示例？

handleMake

如何处理

onChange

事件对象？定义和更新的

selectedMake

值是什么/在哪里？@Akankshasingh

返回。这是来自箭头函数的隐式返回。当你说“我建议将所选索引或id存储在状态”时，你是什么意思。“？@JacksonetherChainStack无需将如此多的数据复制到状态中，因为您可以轻松地从存储的数组索引或使用id搜索汽车品牌和id。如果您使用来自其中一个make对象的数据，则您需要每次搜索

品牌
数组（
O（n）
线性时间）以找到匹配，但是通过使用索引，您可以只获得
O（1）
constant time中所需的make对象。
handleMake = (event) => {
  this.setState({
    selectedMake: event.target.value,
  });
};

...

<Select
  labelId="demo-simple-select-label"
  id="demo-simple-select"
  value={this.state.selectedMake} // <-- value is "index"
  onChange={this.handleMake}
>
  {makes.map((make, index) => (
    <MenuItem key={index} value={index}> // <-- pass index as "value"
      {make.name}
    </MenuItem>
  ))}
</Select>

makes[selectedMake] // { name: "Honda", id: "5de9c553bce4b703a335c204"}

function App() {
  const [selectedMake, setSelectedMake] = useState(-1);

  const changeHandler = (e) => setSelectedMake(e.target.value);

  useEffect(() => {
    console.log(selectedMake, makes[selectedMake]);
  }, [selectedMake]);

  return (
    <div className="App">
      <select value={selectedMake} onChange={changeHandler}>
        <option disabled value={-1}>
          Make
        </option>
        {makes.map((make, i) => (
          <option key={make.id} value={i}>
            {make.name}
          </option>
        ))}
      </select>
    </div>
  );
}