自定义MUI Select组件单选时触发值越界警告的问题排查

问题根源 #

单选模式下，你的selectedSingleValue初始化为空对象{}，而这个空对象并不存在于选项列表（vendorList）中。MUI的Select组件会严格校验传入的value是否属于选项集合的一部分，因此触发了MUI: You have provided an out-of-range value [object Object]警告。

修复步骤 #

1. 修正单选状态的初始值
   将单选状态的初始值从空对象改为null或undefined，表示未选中状态：

   const [selectedSingleValue, setSelectedSingleValue] = useState(null);  // 替换原来的{}
   

2. 处理renderValue的空值情况
   当单选未选中时，selected会是null，需要避免直接访问selected.label导致报错：

   renderValue={(selected) => {
     if (selectMultiple) {
       const data = selected.map((item) => item.label);
       return data.join();
     } else {
       return selected?.label || ""; // 使用可选链操作符处理空值
     }
   }}
   

3. 清理useEffect的冗余依赖
   原来的useEffect依赖了selectedMultiValue，这会导致不必要的重渲染，移除该依赖：

   useEffect(() => {   
     setSelectMultiple(isMultiple === "true" ? true : false);
   }, [data, isMultiple]);  // 移除selectedMultiValue
   

4. 可选：统一默认选中逻辑
   如果需要默认选中第一个选项，可以将初始值设为data[0] || null：

   const [selectedSingleValue, setSelectedSingleValue] = useState(data[0] || null);
   

修改后的关键代码片段 #

const SelectDropDown = (Props) => {
  const { data = [], isMultiple = false, label = "Default" } = Props;

  const [records, setRecords] = useState(data);    
  const [selectMultiple, setSelectMultiple] = useState(false);        
  const [selectedMultiValue, setSelectedMultiValue] = useState([]);    
  const [selectedSingleValue, setSelectedSingleValue] = useState(null);  // 修正初始值

  useEffect(() => {   
    setSelectMultiple(isMultiple === "true" ? true : false);
  }, [data, isMultiple]);  // 清理冗余依赖

  const handleChange = (event) => {
    const value = event.target.value;
    if (selectMultiple) {
        setSelectedMultiValue(value);
    } else {
      setSelectedSingleValue(value);
    }
  };

  return (
    <>
      {/* 原有条件渲染逻辑不变 */}
      <FormControl size="small" style={{ width: "90%" }}>
        <InputLabel id="demo-multiple-checkbox-label">{label}</InputLabel>
        <Select
          labelId="demo-multiple-checkbox-label"
          multiple={selectMultiple}
          onChange={handleChange}
          value={selectMultiple ? selectedMultiValue : selectedSingleValue}
          label={label}
          renderValue={(selected) => {
            if (selectMultiple) {
              const data = selected.map((item) => item.label);
              return data.join();
            } else {
              return selected?.label || ""; // 处理空值
            }
          }}
          MenuProps={MenuProps}
          defaultValue=""
          size="small"
        >
          {/* 原有选项渲染逻辑不变 */}
        </Select>
      </FormControl>
      {/* 原有Chip渲染逻辑不变 */}
    </>
  );
};

验证效果 #

修改后，单选模式下初始状态为未选中（无值），符合MUI Select的校验规则，警告会消失；选中选项后，selectedSingleValue会被设置为对应的选项对象，功能不受影响。

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