MUI Select组件默认标签与值设置异常问题求助

问题原因分析 #

你的代码初始值设置逻辑是正确的，但出现值自动变为2且标签不显示，大概率是以下两个原因：

1. 状态被意外覆盖：组件渲染过程中，有其他逻辑（比如父组件传值、useEffect副作用、其他函数调用）修改了formData.dashboardCleanupDays的值。
2. Select组件匹配失败：当Select无法找到与value匹配的MenuItem时，会自动选中第一个选项（value='2'），且不显示任何标签。

具体解决步骤 #

1. 排查状态被修改的原因 #

先添加监听，确认状态什么时候被改成2：

React.useEffect(() => {
  console.log('dashboardCleanupDays当前值:', formData.dashboardCleanupDays);
}, [formData.dashboardCleanupDays]);

运行后查看控制台输出，定位是哪个逻辑触发了状态变更（比如是否有父组件的props更新、其他onChange事件误修改了该字段）。

2. 修复Select组件的显示问题 #

给Select添加displayEmpty属性，并手动指定渲染值的逻辑，避免匹配失败时显示空或自动选中第一个选项：

<Grid item xs={6} sm={6} md={2} className='pd0 txt-left'>
  <Select 
    className="selectbox1"
    variant='outlined'
    displayEmpty  // 允许显示空值或未匹配值，避免自动选中第一项
    MenuProps={{
        anchorOrigin: {
            vertical: 'bottom',
            horizontal: 'left'
        },
        getContentAnchorEl: null,
        transitionDuration: 0
    }}
    onChange={(e) => onChangeForm('dashboardCleanupDays', e.target.value)}
    value={formData.dashboardCleanupDays}
    // 手动匹配标签，确保显示正确的文本
    renderValue={(selected) => {
      const matchedItem = CLEAN_UP_DASHBOARD.find(item => item.value === selected);
      return matchedItem ? matchedItem.label : 'Every 7 days';
    }}
  >
      {CLEAN_UP_DASHBOARD.map((dashItem) => {
          // 务必加上key，避免React渲染警告
          return <MenuItem key={dashItem.value} value={dashItem.value}>{dashItem.label}</MenuItem>
      })}
  </Select>
</Grid>

3. 确认初始状态的正确性 #

可以暂时将初始状态写死，排除defaultFormData被意外修改的可能：

const [formData, setFormData] = React.useState({ dashboardCleanupDays: '7' });

额外检查点 #

• 确保onChangeForm函数没有在其他地方被误调用，传入了错误的keyName或keyValue。
• 检查是否有父组件通过props传递值给该组件，并覆盖了本地状态。

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