Estoy creando una aplicación web simple que tiene objetos anidados y noté que cuando elimino el objeto de miembros, que contiene el objeto de secciones, aparece un error porque useSelectors está buscando a los miembros.
Mi pregunta es cómo hago un useSelector dinámico que deje de activarse cuando el objeto que está buscando o el objeto en el que está anidado está vacío o el objeto se elimina.
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)Así es como se ve el objeto de miembros, así como el objeto de secciones anidadas.
members: { 0: { memberId: '', materialId: '', sectionId: '', totalLengthOfMember: '', yAxisUnbracedLength: '', yAxisEffectiveLengthFactor: '', zAxisUnbracedLength: '', zAxisEffectiveLengthFactor: '', unbracedLengthLateralTorsional: '', lateralTorsionalModificationFactor: '', slendernessRatioInCompression: '', slendernessRatioInTension: '', sections: { 0: { sectionId: '', sectionShape: '', sectionName: '', sectionView: '', sectionEdit: '' } } } },Mi objetivo es permitir que el usuario elimine el objeto de miembros. Sin embargo, cuando el usuario hace eso, las secciones useSelector dan un error porque no puede encontrar un índice de miembros.
¿Cómo puedo solucionar esto? ¡Gracias chicos!
La solución es fácil, no renderice el componente que usa ese selector si no hay miembros.
Lo más probable es que su respuesta sea "pero todos esos useSelector están en el mismo componente"
a lo que responderé:
Su componente es demasiado grande, solo haga los más pequeños, de responsabilidad única y divida los useSelector entre ellos.
Publique su código de componente.