Estoy trabajando en un proyecto que crea una extensión de Chrome. Estoy tratando de devolver un objeto y quiero actualizarlo cuando cambió curTab. Sin embargo, recibo un error: se generaron menos ganchos de los esperados. ¿Cómo puedo arreglar eso?
export const CategoryHandling = () => { const tabHosts = useSelector((state: RootState) => state.tabHosts) const curTab = useSelector((state: RootState) => state.currentTab) const ns3Cache = useSelector((state: RootState) => state.ns3Cache) const [ctgObject, setCategoryObject] = useState({ ads: [], malware: [], tracking: [], family: [], adult: [], }) useEffect(() => { setCategoryObject({ ads: [], malware: [], tracking: [], family: [], adult: [], }) }, [curTab]) const hosts = curTab?.id ? tabHosts[curTab.id] : [] hosts && hosts.length !== 0 && hosts.map((host) => { if ( ns3Cache?.[host] && ns3Cache?.[host].length !== 0 && !ns3Cache[host].hasOwnProperty('isLoading') ) { ns3Cache[host].map((matchesItem) => { if ( !ctgObject[matchesItem['list_category']].includes( matchesItem['hostname'] ) ) { ctgObject[matchesItem['list_category']].push( matchesItem['hostname'] ) } }) } }) return ctgObject }Esto se debe a que se llaman ganchos dentro de iteraciones o bloques condicionales, los escenarios más comunes en los que encontré este tipo de error fueron como:
// Using useSelector inside a map function const myList = someIds.map((id) => useSelector((state) => state.someSlice[id])); // Calling useEffect inside if block if(someCondition) { useEffect(() => { // doing some stuff }, []); }Busque este tipo de errores en sus componentes.