I'm making a simple web app that has nested objects and I noticed when I delete the members object, which contains the sections object, I get an error because useSelectors is looking for the members.
My question is how do I make a dynamic useSelector that will stop firing when the object it is looking for or the object it is nested in is empty or the object is deleted.
const selectedTool = useSelector(state => state.dashboard.selectedTool)
const i = parseFloat(selectedTool)
const members = useSelector(state => state.dashboard.sheets[i].members)
const selectedMember = useSelector(state => state.dashboard.selectedMember)
const sections = useSelector(state => state.dashboard.sheets[i].members[selectedMember].sections)
This is what the members object looks like as well as the nested sections object.
members: {
0: {
memberId: '',
materialId: '',
sectionId: '',
totalLengthOfMember: '',
yAxisUnbracedLength: '',
yAxisEffectiveLengthFactor: '',
zAxisUnbracedLength: '',
zAxisEffectiveLengthFactor: '',
unbracedLengthLateralTorsional: '',
lateralTorsionalModificationFactor: '',
slendernessRatioInCompression: '',
slendernessRatioInTension: '',
sections: {
0: {
sectionId: '',
sectionShape: '',
sectionName: '',
sectionView: '',
sectionEdit: ''
}
}
}
},
My goal is to allow the user to delete the members object. However when the user does that, the sections useSelector gives an error because it cannot find a member index.
How do I fix this? Thank you guys!
The solution is easy, don't render the component that uses that selector if there are no members.
Your reply will most likely be, "but all those useSelector's are in the same component"
to which I will answer:
Your component is too large, just make smaller, single responsibility ones and split the useSelector's amongst those.
Post your component code.