axios 通过使用API和参数生成树菜单

qij5mzcb  于 2022-11-23  发布在  iOS
关注(0)|答案(1)|浏览(128)

我有一个问题,同时请你帮助,因为我有一个问题,在我的编码。
因此,我打算根据菜单组件树中的“Province”参数显示“City”菜单。
我以前设法在树型菜单组件中显示省名菜单,结果是这样的。

嗯,以后省份的菜单名称会根据“省”参数出现城市的名称,但是我试了试,失败了,结果是这样的

这是我的代码=
Building.js

export const getBuildingOLDallProvinsi = () => {
  return new Promise((resolve, reject) => {
    axios
      .get(`${baseUrl}/api/nad/buildingCount`, {
        headers: { Authorization: `Bearer ${token}` },
      })
      .then((response) => {
        resolve(response.data.data);
      })
      .catch((error) => {
        if (error.response?.data.code === 404)
          resolve({ lists: [], totalCount: 0 });
        console.log(error.response);
        reject(error?.response?.data?.message || "Network error.");
      });
  });
};

export const getBuildingOLDallKota = (provinsi) => {
  return new Promise((resolve, reject) => {
    axios
      .get(`${baseUrl}/api/nad/buildingCount/${provinsi}`, {
        headers: { Authorization: `Bearer ${token}` },
      })
      .then((response) => {
        resolve(response.data.data);
      })
      .catch((error) => {
        if (error.response?.data.code === 404)
          resolve({ lists: [], totalCount: 0 });
        console.log(error.response);
        reject(error?.response?.data?.message || "Network error.");
      });
  });
};

TreeData.jsx

import React, { useEffect, useState } from "react";
import TreeMenu from "react-simple-tree-menu";
import "react-simple-tree-menu/dist/main.css";
import {
  getBuildingOLDallProvinsi,
  getBuildingOLDallKota,
} from "../../../service/building";
import { useParams } from "react-router-dom";

const TreeData = () => {
  const [countData, setCount] = useState([]);
  const [countData2, setCount2] = useState([]);

  const getDataAllProvinsi = () => {
    getBuildingOLDallProvinsi()
      .then((resolve) => {
        console.log(resolve);
        setCount(resolve);
      })
      .catch((reject) => {
        console.log(reject);
      });
  };

  const { provinsi } = useParams();
  const getDataAllKota = (param) => {
    getBuildingOLDallKota({ ...param, provinsi: provinsi })
      .then((resolve) => {
        console.log(resolve);
        setCount2(resolve);
      })
      .catch((reject) => {
        console.log(reject);
      });
  };

  useEffect(() => {
    getDataAllProvinsi();
    getDataAllKota();
  }, []);

  return (
    <>
      <div className="row">
        <div className="col text-center">
          <p className="mt-3">
            <div className="row mt-3 d-flex justify-content-center cursor-pointer">
              <div className="col-lg-8 text-left text-dark">
                <TreeMenu
                  cacheSearch
                  data={[
                    {
                      key: "provinsi",
                      label: "Provinsi",
                      nodes: countData.map((data) => {
                        return {
                          key: data.id,
                          label: [data.provinsi, data.total_building],
                          nodes: [
                            {
                              key: "kota",
                              label: "Kota",
                              nodes: countData2.map((data) => {
                                return {
                                  key: data.provinsi,
                                  label: [data.kota, data.total_building],
                                  nodes: [
                                    {
                                      key: data.id,
                                      label: data.total_building,
                                      nodes: [],
                                    },
                                  ],
                                };
                              }),
                            },
                          ],
                        };
                      }),
                    },
                  ]}
                  debounceTime={125}
                  disableKeyboard={false}
                  hasSearch={false}
                  onClickItem={function noRefCheck() {}}
                  resetOpenNodesOnDataUpdate={false}
                />
              </div>
            </div>
          </p>
        </div>
      </div>
    </>
  );
};

export default TreeData;

提前谢谢你,你的帮助对我很有帮助,我真的很尊重你所有的答案。
编辑=这是我的响应API
pastebin(点)com/Bua 3FThZ
pastebin(点)com/ERSCHDSR公司

u3r8eeie

u3r8eeie1#

更新:在控制台中,我可以显示基于省的参数数据。
例如,省的数据为“ACEH”,则ACEH数据出现在控制台中...

const getDataAllKota = (param) => {
    getBuildingOLDallKota("ACEH")
      .then((resolve) => {
        console.log(resolve);
        setCount2(resolve);
      })
      .catch((reject) => {
        console.log(reject);
      });
  };

  console.log(countData2);

现在我对如何在组件树菜单中按省显示参数数据感到困惑。

相关问题