useEffect(() => {
console.log("Current node: ", currID, "untattachedID: ", unattachedNodeID)
const toggleNodes = unattachedNodeID === currID
const showHideNodes = getNodes()
.map((node) => {
return children.some((child) => child.id === node.id && child.type === NodeType.UnattachedNode)
? {
...node,
hidden: !toggleNodes
}
: node
})
const showHideEdges = getEdges()
.map((edge) => {
return children.some((child) => child.id === edge.target && child.type === NodeType.UnattachedNode)
? {
...edge,
hidden: !toggleNodes
}
: edge
})
setNodes(showHideNodes);
setEdges(showHideEdges);
console.log(showHideNodes.filter((node) => !node.hidden))
}, [unattachedNodeID, currID, children, getNodes, setNodes, getEdges, setEdges])
#BUG: Only one SetNode call in series triggered by UseEffect takes effect
1 messages · Page 1 of 1 (latest)
The hook should show all of the nodes attached children
I think this picture captures well whats wrong. See how the first console log (prints only node with hidden: false) prints the updated node state from the parent, but the second setNode seems to override it, even though in the code its only asked to make toggle the hidden state of its own children and return every other node as is
From this, I conclude that between:
parent:getNodes -> parent:setNodes() -> child:getNodes() -> child:setNodes(), the value of getNodes is not being updated