觸發 api 調用設置 MUI 的默認值 Select

Question

簡而言之：在 Material-UI Select 組件中設置默認值時執行 onChange 事件。

當你運行這個反應組件時，你會發現一個 Material UI Select 組件，其默認選擇選項為 10，正在使用 useState 掛鈎設置。如何在設置默認值的同時進行 API 調用。 只有當我們更改下拉菜單項時才會執行 onChange 道具。如果我們正在加載帶有一些 Select 組件的頁面並設置一些默認菜單項，那么我們如何進行 API 調用並獲取一些數據。

使用 CodeSand Box 鏈接。 即使 Select 中的 menu-item/ 選項從空字符串更改為 10，警報消息也不會執行。

假設默認值來自一些 API 調用。

export default function SelectVariants() {
  const [age, setAge] = React.useState("10");

   
  
  
  //This should execute by default or on Page Load
  const handleChange = (event: SelectChangeEvent) => {
    setAge(event.target.value);
    alert("Run on load"); // Can be an API Call on the Page load And also on Subsequent onChange Events
  };

  return (
    <div>
      <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
        <InputLabel id="demo-simple-select-standard-label">Age</InputLabel>
        <Select
          labelId="demo-simple-select-standard-label"
          id="demo-simple-select-standard"
          value={age}
          onChange={handleChange}
          label="Age"
        >
      <MenuItem value={""}>None</MenuItem>
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
      </Select>
      </FormControl>
    </div>
  );
}

代碼筆示例

Answer 1

這種效果將在負載和每次age變化時運行：

useEffect(() => {

  // make an API call

}, [age]);