React-MUI下拉框自定义显示值问题：值超出范围警告

问题场景 #

要实现一个下拉框：下拉面板内是两个指标的刻度选择按钮，下拉框的显示规则为：当两个指标刻度相同时显示linear或log，刻度不同时显示mixed。使用MUI Select组件时触发警告：

MUI: You have provided an out-of-range value `linear` for the select component.

问题原因 #

MUI Select要求value属性必须匹配某个MenuItem的value值（或为空）。你的代码中，Select的value绑定了displayMetricScale()的返回值（linear/log/mixed），但这些值没有对应的MenuItem，因此触发范围警告。

解决方案 #

修改思路 #

1. 给Select绑定一个存在的MenuItem的value（可设置为隐藏选项），满足MUI的校验要求；
2. 通过renderValue属性自定义下拉框的显示内容，实现你需要的逻辑。

修改后的代码 #

import { useState } from 'react';
import { Select, MenuItem, FormControl, FormLabel, Button } from '@mui/material';

// 假设scale_metric1和scale_metric2是你的状态变量
const [scale_metric1, setScale_metric1] = useState('linear');
const [scale_metric2, setScale_metric2] = useState('linear');
// 用于Select的固定value，匹配隐藏的MenuItem
const [selectValue, setSelectValue] = useState('scale-settings');

const displayMetricScale = () => {
  return scale_metric1 === scale_metric2 ? scale_metric1 : 'mixed';
};

// 修改刻度的函数，区分指标1和2
const changeScaleLin = (metric) => {
  if (metric === 1) setScale_metric1('linear');
  else setScale_metric2('linear');
};

const changeScaleLog = (metric) => {
  if (metric === 1) setScale_metric1('log');
  else setScale_metric2('log');
};

// 渲染组件
return (
  <Select
    label="Scale"
    value={selectValue}
    onChange={(e) => setSelectValue(e.target.value)}
    renderValue={() => displayMetricScale()}
  >
    {/* 隐藏的选项，用于匹配Select的value，避免警告 */}
    <MenuItem value="scale-settings" style={{ display: 'none' }}></MenuItem>
    <MenuItem>
      <FormControl>
        <FormLabel>Metric 1</FormLabel>
        <Button onClick={() => changeScaleLin(1)}>Linear</Button>
        <Button onClick={() => changeScaleLog(1)}>Logarithmic</Button>
      </FormControl>
    </MenuItem>
    <MenuItem>
      <FormControl>
        <FormLabel>Metric 2</FormLabel>
        <Button onClick={() => changeScaleLin(2)}>Linear</Button>
        <Button onClick={() => changeScaleLog(2)}>Logarithmic</Button>
      </FormControl>
    </MenuItem>
  </Select>
);

额外说明 #

如果你的场景只是需要一个带弹出面板的触发按钮，而非传统选择器，也可以考虑使用MUI的Popover组件，它更适合这种自定义面板的场景，无需处理Select的value匹配问题。

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