如何在设置Material-UI Select默认值时触发API调用

我在使用Material-UI的Select组件时，通过useState设置了默认值为"10"，但组件加载时并不会触发onChange事件里的API调用（示例中用alert代替）。只有手动切换下拉选项时，onChange才会执行。现在需要实现：页面加载时，在设置默认选中值的同时触发对应的API调用，后续切换选项时也能正常触发该逻辑。

示例代码如下：

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

  // 希望页面加载时也能执行这个方法，同时切换选项时也执行
  const handleChange = (event) => {
    setAge(event.target.value);
    alert("Run on load"); // 实际场景为API调用
  };

  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>
  );
}

方法1：拆分逻辑+useEffect监听（推荐） #

把API调用的核心逻辑抽成独立函数，用useEffect在组件挂载时触发一次，同时在handleChange中保留切换选项时的触发逻辑：

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

  // 抽离API调用逻辑
  const fetchData = (selectedValue) => {
    alert(`触发API调用，选中值：${selectedValue}`);
    // 替换为实际API请求：
    // fetch(`/api/data?age=${selectedValue}`)
    //   .then(res => res.json())
    //   .then(data => { /* 处理返回数据 */ });
  };

  // 组件挂载时，用默认值触发API调用
  React.useEffect(() => {
    fetchData(age);
  }, []); // 空依赖数组确保只在挂载时执行一次

  const handleChange = (event) => {
    const newValue = event.target.value;
    setAge(newValue);
    fetchData(newValue); // 切换选项时触发API调用
  };

  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>
  );
}

方法2：手动模拟触发handleChange（适合简单场景） #

如果不想拆分逻辑，可以在组件挂载时手动调用handleChange，传入模拟的事件对象：

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

  const handleChange = (event) => {
    const newValue = event.target.value;
    setAge(newValue);
    alert(`触发API调用，选中值：${newValue}`);
  };

  React.useEffect(() => {
    // 手动创建符合结构的事件对象，触发handleChange
    handleChange({ target: { value: age } });
  }, []);

  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>
  );
}

特殊场景处理：默认值来自API #

如果默认值本身是通过API请求获取的，需要把默认值作为useEffect的依赖，确保默认值加载完成后再触发数据请求：

export default function SelectVariants() {
  const [defaultAge, setDefaultAge] = React.useState(null);
  const [age, setAge] = React.useState(null);

  const fetchData = (selectedValue) => {
    alert(`触发API调用，选中值：${selectedValue}`);
  };

  // 先请求获取默认值
  React.useEffect(() => {
    fetch("/api/default-age")
      .then(res => res.json())
      .then(data => {
        setDefaultAge(data);
        setAge(data);
      });
  }, []);

  // 默认值获取到后，触发数据请求
  React.useEffect(() => {
    if (age) {
      fetchData(age);
    }
  }, [age]);

  const handleChange = (event) => {
    const newValue = event.target.value;
    setAge(newValue);
    fetchData(newValue);
  };

  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"
          disabled={!age}
        >
          <MenuItem value="">None</MenuItem>
          <MenuItem value={10}>Ten</MenuItem>
          <MenuItem value={20}>Twenty</MenuItem>
          <MenuItem value={30}>Thirty</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

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