React中动态更新下拉菜单选项：构建级联选择器的实践指南

import { useEffect, useState } from "react";
import menuservice from "../../../services/MenuService"; // 假设存在一个菜单服务

function MenuCreate() {
  // ... 其他状态变量 (name, link, status 等)

  // 父级下拉菜单：菜单类型
  const [selectedType, setSelectedType] = useState("");
  // 子级下拉菜单：父菜单ID
  const [selectedTableId, setSelectedTableId] = useState(0);
  // 子级下拉菜单的选项列表
  const [tableIdOptions, setTableIdOptions] = useState([]);

  // 加载状态和错误信息，用于UX优化
  const [isLoadingTableOptions, setIsLoadingTableOptions] = useState(false);
  const [errorTableOptions, setErrorTableOptions] = useState(null);

  // ... 其他函数 (postStore, navigate 等)
}

// ... (在MenuCreate组件内部)

  // 异步函数：根据菜单类型获取父菜单选项
  const fetchTableIdOptions = async (typeValue) => {
    // 如果没有选择类型，则清空选项并重置子菜单值
    if (!typeValue) {
      setTableIdOptions([]);
      setSelectedTableId(0);
      return;
    }

    setIsLoadingTableOptions(true); // 设置加载状态
    setErrorTableOptions(null);     // 清除之前的错误

    try {
      // 假设 menuservice.getMenusByType(typeValue) 是一个根据类型获取菜单的API方法
      // 它应该返回一个包含 { id, name } 结构菜单对象的数组
      const result = await menuservice.getMenusByType(typeValue);
      const fetchedOptions = result.data; // 假设API返回的数据在 result.data 中

      setTableIdOptions(fetchedOptions); // 更新子菜单选项

      // 检查当前选中的父菜单ID是否在新选项中有效
      const isValidSelection = fetchedOptions.some(
        (menu) => menu.id === selectedTableId
      );
      if (!isValidSelection && selectedTableId !== 0) {
        // 如果当前选中值无效且不是“无父菜单”，则重置为“无父菜单”
        setSelectedTableId(0);
      }
    } catch (error) {
      console.error("Error fetching table ID options:", error);
      setErrorTableOptions("无法加载菜单选项。"); // 设置错误信息
      setTableIdOptions([]); // 发生错误时清空选项
      setSelectedTableId(0); // 重置子菜单值
    } finally {
      setIsLoadingTableOptions(false); // 结束加载状态
    }
  };

// 假设 menuservice.js 文件中
const MenuService = {
  // ... 其他方法
  getMenusByType: async (type) => {
    // 实际的API调用，例如使用axios
    // return await axios.get(`/api/menus?type=${type}`);
    // 模拟数据返回
    return new Promise(resolve => {
      setTimeout(() => {
        const allMenus = [
          { id: 1, name: "主页", type: "mainmenu" },
          { id: 2, name: "产品", type: "mainmenu" },
          { id: 3, name: "关于我们", type: "footermenu" },
          { id: 4, name: "联系方式", type: "footermenu" },
          { id: 5, name: "博客", type: "mainmenu" },
          { id: 6, name: "服务", type: "other" },
        ];
        const filtered = allMenus.filter(menu => menu.type === type);
        resolve({ data: filtered });
      }, 500); // 模拟网络延迟
    });
  },
};
export default MenuService;

// ... (在MenuCreate组件内部)

  useEffect(() => {
    fetchTableIdOptions(selectedType);
  }, [selectedType]); // 依赖项数组中包含 selectedType

import { faBackward, faFloppyDisk } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Link, useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";

import menuservice from "../../../services/MenuService";

function MenuCreate() {
  const navigate = useNavigate();
  const [name, setName] = useState("");
  const [link, setLink] = useState("");
  const [status, setStatus] = useState(1);

  const [selectedType, setSelectedType] = useState("");
  const [selectedTableId, setSelectedTableId] = useState(0);
  const [tableIdOptions, setTableIdOptions] = useState([]);
  const [isLoadingTableOptions, setIsLoadingTableOptions] = useState(false);
  const [errorTableOptions, setErrorTableOptions] = useState(null);

  const fetchTableIdOptions = async (typeValue) => {
    if (!typeValue) {
      setTableIdOptions([]);
      setSelectedTableId(0);
      return;
    }
    setIsLoadingTableOptions(true);
    setErrorTableOptions(null);
    try {
      const result = await menuservice.getMenusByType(typeValue);
      const fetchedOptions = result.data;

      setTableIdOptions(fetchedOptions);

      const isValidSelection = fetchedOptions.some(
        (menu) => menu.id === selectedTableId
      );
      if (!isValidSelection && selectedTableId !== 0) {
        setSelectedTableId(0);
      }
    } catch (error) {
      console.error("Error fetching table ID options:", error);
      setErrorTableOptions("无法加载菜单选项。");
      setTableIdOptions([]);
      setSelectedTableId(0);
    } finally {
      setIsLoadingTableOptions(false);
    }
  };

  useEffect(() => {
    fetchTableIdOptions(selectedType);
  }, [selectedType]); // 依赖项中包含 selectedType

  async function postStore(event) {
    event.preventDefault();
    const image = document.querySelector("#image");
    var menu = new FormData();
    menu.append("name", name);
    menu.append("link", link);
    menu.append("table_id", selectedTableId);
    menu.append("type", selectedType);
    menu.append("status", status);
    if (image.files[0]) {
      menu.append("image", image.files[0]);
    }

    try {
      await menuservice.create(menu).then(function (res) {
        alert(res.data.message);
        navigate("../../admin/menu", { replace: true });
      });
    } catch (error) {
      console