I am having an issue with my react component. It is a navbar that is lazily loading the directories and items in them.
if there is just a directory and has items in it then its working fine.(refer img_1)
The issue seems to be that when there is a directory inside a directory and inner has items inside it then the component is not re-rendering after state update and so I only see the loading icon instead of the items .(refer img_2)
but when I toggle other directory then the items in the previous one are displayed and the second directory items show loading icon (refer img_3)
I have added the pics for reference and the code for component in below link
https://github.com/aasim-s/react_issue
I have tired to render the component again when the state children state is updated but it goes into infinite retendering
React.useEffect(() => {
const keys = Object.keys(treeCache);
if (treeCache["@Batch Connections@BECRS"]) {
console.log("hi");
}
setChildren((ch) => {
let chArray = [];
keys.forEach((key) => {
if (treeCache[key]) {
chArray.push({
[key]: treeCache[key].map((ch) => {
createChildItems(ch);
//return {[ch.pathId]: createWorkflowVersions(ch)};
}),
});
} else {
chArray.push({
[key]: createBasicTreeNode(
key + "-child",
key + "-child",
NoneIconLoading,
""
),
});
}
});
const ret={ ...ch, ...chArray };
return ret;
});
}, [treeCache]);
when ever a directory is toggled the data from api call is added to treeCache which will then find the same item.pathId in state children and add an array with the nodes to be displayed in children.
but the children is not getting updated with the required item.pathId in same cycle as when it is added to treeCache so only NoneIconLoading is added to the state children,
i have tried to update the state by using useEffect but that is not helping either.
useEffect(() => {
console.log("Updated children:", children);
}, [children]);
please help.
Aasim Sayyed is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.