我有一个问题,同时请你帮助,因为我有一个问题,在我的编码。
因此,我打算根据菜单组件树中的“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公司
1条答案
按热度按时间u3r8eeie1#
更新:在控制台中,我可以显示基于省的参数数据。
例如,省的数据为“ACEH”,则ACEH数据出现在控制台中...
现在我对如何在组件树菜单中按省显示参数数据感到困惑。