React MUI下拉组件onChange事件返回值为undefined求助

核心错误点 #

1. 表单未正确使用自定义下拉组件
   你在表单代码里反复使用了<ListDividers>，但实际应该渲染你写的<Frase>组件，导致handleOnChange和options等属性根本没传递到正确的下拉组件中，自然无法捕获选中事件。

2. 事件处理函数未获取选中值
   handleSegmentos里直接用project.Segmento赋值，没有从事件对象中提取用户选中的选项，而且React的setState是异步操作，直接console.log(project)打印的是更新前的旧值。

3. 冗余状态定义
   Frase组件内部定义了[Segmento, SetSegmento]但完全没用到，属于无效代码，可以删除。

修复后的代码示例 #

1. 修正表单代码（正确使用Frase组件） #

<Frase 
  handleOnChange={handleSegmentos} 
  options={Segmento} 
  value={project.Segmento}
/>
<SubmitButton text={btnText} />

2. 修正事件处理函数 #

function handleSegmentos(e) {
  const selectedSegmento = e.target.value;
  // 使用函数式更新确保拿到最新的project状态
  Setproject(prevProject => ({
    ...prevProject,
    Segmento: selectedSegmento
  }));
  // 直接打印选中的值，如需查看更新后的project，可通过useEffect监听状态变化
  console.log(selectedSegmento);
}

3. 精简Frase组件（删除无用状态） #

import { useState, useEffect } from 'react';
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';

function Frase({ text, name, options, handleOnChange, value, project }) {
  return (
    <Box sx={{ minWidth: 120 }}>
      <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Segmento</InputLabel>
        <Select 
          onChange={handleOnChange} 
          value={value || ''} 
          displayEmpty
          name={name}
        >
          {options?.map((Menuitem, index) => (
            <MenuItem 
              variant='selectedMenu' 
              value={Menuitem}  
              key={Menuitem.id}
            >
              {Menuitem.nome}  
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </Box>
  );
}

export default Frase;

额外注意事项 #

• 确保options数组中的每一项都包含id（作为渲染key）和nome属性，避免控制台出现渲染警告。
• 如果只需要存储选中项的ID而非整个对象，可将MenuItem的value改为Menuitem.id，再在事件处理函数中根据ID匹配对应的选项对象。

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