React中使用react-simple-tree-menu从API加载渲染省份树形菜单

问题描述 #

我在使用react-simple-tree-menu组件展示省份名称树形菜单时遇到了问题，预期效果如图所示，但不知道如何从指定API端点获取数据并进行渲染，请求帮助。
API端点地址：https://www.mocky.io/v3/4c38e8a1-aa12-484d-900e-2c67726a09bf
现有代码如下：

import React from "react";
import TreeMenu from "react-simple-tree-menu";
import "react-simple-tree-menu/dist/main.css";

<TreeMenu
  cacheSearch
  data={[
    {
      key: "provinsi",
      label: "Provinsi",
      nodes: [
        {
          key: "aceh",
          label: "ACEH",
          nodes: [
            {
              key: "total_building",
              label: "902705",
              nodes: [],
            },
          ],
        },
        {
          key: "bali",
          label: "BALI",
          nodes: [
            {
              key: "total_building",
              label: "1584831",
              nodes: [],
            },
          ],
        },
        {
          key: "banten",
          label: "BANTEN",
          nodes: [
            {
              key: "total_building",
              label: "2043597",
              nodes: [],
            },
          ],
        },
      ],
    },
  ]}
  debounceTime={125}
  disableKeyboard={false}
  hasSearch={false}
  onClickItem={function noRefCheck() {}}
  resetOpenNodesOnDataUpdate={false}
/>

解决方案 #

1. 核心思路 #

通过React的useState存储树形数据，useEffect发起API请求，将返回的数据转换为组件要求的结构后，传入TreeMenu的data属性即可。

2. 完整代码示例 #

import React, { useState, useEffect } from "react";
import TreeMenu from "react-simple-tree-menu";
import "react-simple-tree-menu/dist/main.css";

const ProvinceTree = () => {
  // 存储适配后的树形菜单数据
  const [treeData, setTreeData] = useState([]);

  useEffect(() => {
    // 异步获取API数据并处理格式
    const fetchAndFormatData = async () => {
      try {
        const response = await fetch("https://www.mocky.io/v3/4c38e8a1-aa12-484d-900e-2c67726a09bf");
        const rawProvinces = await response.json();
        
        // 转换为react-simple-tree-menu要求的结构
        const formattedTree = [
          {
            key: "provinsi",
            label: "Provinsi",
            nodes: rawProvinces.map(province => ({
              key: province.province_name.toLowerCase().replace(/\s/g, ""),
              label: province.province_name,
              nodes: [
                {
                  key: `${province.province_name}-total`,
                  label: province.total_building.toString(),
                  nodes: []
                }
              ]
            }))
          }
        ];

        setTreeData(formattedTree);
      } catch (err) {
        console.error("数据获取失败:", err);
      }
    };

    fetchAndFormatData();
  }, []);

  return (
    <TreeMenu
      cacheSearch
      data={treeData}
      debounceTime={125}
      disableKeyboard={false}
      hasSearch={false}
      onClickItem={() => {}} // 可根据需求自定义点击逻辑
      resetOpenNodesOnDataUpdate={false}
    />
  );
};

export default ProvinceTree;

关键细节说明 #

• 数据格式转换：API返回的是包含province_name和total_building的数组，需要将每个省份映射为组件要求的节点结构，确保每个节点有唯一的key值。
• 异步请求处理：利用async/await处理API请求，放在useEffect中保证组件挂载时仅执行一次请求。
• 错误捕获：添加try/catch捕获请求异常，便于调试排查问题。

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