如何在React Material-UI Select中将先前状态设置为默认值

• 你使用的是受控模式的Select组件，已经通过value属性绑定了状态，defaultValue仅在组件首次渲染时生效，后续弹窗重新打开时defaultValue不会更新，属于冗余属性。
• 弹窗打开时没有将你已保存的历史选择值同步到value对应的state中，所以重新打开弹窗时state还是初始空值，导致选框显示为空。
• 需确保你保存的历史值类型和MenuItem的value类型完全匹配，当前MenuItem的值是字符串类型的"1"/"2"/"3"，不要传入数字类型的1/2/3，否则会匹配失败。

1. 监听弹窗的打开状态，弹窗触发打开时，将你已保存的历史选择值赋值给value对应的state。
2. 删除Select组件上的defaultValue属性，受控组件仅需保留value属性即可。
3. 校验历史值的类型，确保和MenuItem的value类型一致。

// 假设你已保存的历史严重等级存在savedSeverity变量中，类型为字符串 "1"/"2"/"3"
const [value, setValue] = useState("");

// 新增监听弹窗打开状态的副作用
useEffect(() => {
  if (isOpen) {
    // 弹窗打开时同步历史值到state
    setValue(savedSeverity || "");
  }
}, [isOpen, savedSeverity])

const handleChange = (e) => {
  setValue(e.target.value);
}

<Dialog
  open={isOpen}
  onClose={handleClose}
  aria-labelledby="form-dialog-title"
  fullWidth
>
  <DialogTitle id="form-dialog-title">Edit</DialogTitle>
  <DialogContent>
    <FormControl fullWidth>
      <InputLabel shrink id="inputLabel">
        Select severity
      </InputLabel>
      <Select
        labelId="inputLabel"
        id="severity"
        value={value}
        onChange={handleChange}
        displayEmpty
        fullWidth
        MenuProps={{
          anchorOrigin: {
            vertical: "bottom",
            horizontal: "left",
          },
          transformOrigin: {
            vertical: "top",
            horizontal: "left",
          },
          getContentAnchorEl: null,
        }}
      >
        <MenuItem value={"1"}>High</MenuItem>
        <MenuItem value={"2"}>Medium</MenuItem>
        <MenuItem value={"3"}>Low</MenuItem>
      </Select>
    </FormControl>
  </DialogContent>
  <DialogActions>
    <Button onClick={handleClose} variant="contained">
      Cancel
    </Button>
    <Button
      onClick={handleChangeSeverity}
      variant="contained"
      color="secondary"
    >
      OK
    </Button>
  </DialogActions>
  Current Value: {value}
</Dialog>

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