Next.js中使用Material UI Select组件出现无法修复的报错

在Next.js项目中使用Material UI v4版本的Select组件时，页面抛出无法自行定位的运行时错误，报错截图如下：

对应问题实现代码：

import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";

<Select defaultValue="1"  variant="standard" value={sampleref.current} ref={sampleref} onChange={handleChange}>
            <MenuItem value="1" className="1" >1</MenuItem>
            <MenuItem value="2" className="2">2</MenuItem>
        </Select>

• 组件受控模式冲突：Material UI的Select组件不能同时配置defaultValue和value属性。defaultValue仅用于非受控组件（组件内部自行维护选中状态），value仅用于受控组件（状态由外部逻辑维护），两个属性同时传入会直接触发组件内部的状态合法性校验报错。
• 值绑定逻辑错误：将value直接绑定到ref对象的current属性，ref的current值变更不会触发组件重渲染，无法驱动受控组件完成视图更新。
• ref绑定方式错误：直接给Select组件绑定普通ref，拿到的是组件类实例而非内部承载值的input DOM节点，无法正确读取选中值。

根据业务场景二选一即可，禁止混用两种组件模式：

方案1：非受控模式（仅需在提交/特定时机读取选中值，不需要实时联动状态） #

移除value、onChange属性，将ref绑定到inputRef属性上，保留defaultValue配置初始值：

import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import { useRef } from "react";

export default function SelectDemo() {
  const sampleref = useRef(null);

  // 需要取值时直接读取 sampleref.current.value 即可
  return (
    <Select 
      defaultValue="1"
      variant="standard"
      inputRef={sampleref}
    >
      <MenuItem value="1" className="1">1</MenuItem>
      <MenuItem value="2" className="2">2</MenuItem>
    </Select>
  )
}

方案2：受控模式（选中后实时触发联动逻辑，官方推荐用法） #

移除defaultValue属性和ref值绑定，用React state维护选中值，初始值直接在state中声明：

import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import { useState } from "react";

export default function SelectDemo() {
  const [sampleValue, setSampleValue] = useState("1");
  const handleChange = (e) => {
    setSampleValue(e.target.value);
    // 此处可补充选中后的自定义业务逻辑
  }

  return (
    <Select 
      variant="standard"
      value={sampleValue}
      onChange={handleChange}
    >
      <MenuItem value="1" className="1">1</MenuItem>
      <MenuItem value="2" className="2">2</MenuItem>
    </Select>
  )
}

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