Estoy usando el método .filter() en un objeto dentro de un método useEffect() para filtrar ciertas matrices por nombre si existen en un segundo objeto. Necesito recuperar la diferencia de matrices en un método useState() . Estoy usando lo siguiente y funciona fuera del método useEffect() :
useEffect(() => { getDBData().then( (r) => { setAnotherObj(r); }); getAPICall().then((r) => { let result = r.filter( (o1) => !anotherObj.filter((o2) => o1.name === o2.name) ); setOption(result); }); }, []); Ahora que funciona fuera del método useEffect cuando lo agrego a un evento como onClick, pero no dentro, podría funcionar una vez y luego no funciona en absoluto. ¿Qué me falta sobre el método useEffect que necesito saber por qué no se realiza el filtrado?
Reemplace el segundo filter con find . !anotherObj.filter(o2 => o1.name === o2.name) siempre devolverá false , ya sea que tenga elementos o no.
No hay una matriz de dependencia en useEffect , por lo que cada vez que hay un cambio de estado, este useEffect se activa nuevamente.
Encontrando AB, filtra todos los elementos de A que no están en B. r.filter(o1 => anotherObj.find(o2 => o1.name !== o2.name)); Con esto elimina todos los elementos que son comunes en A y B. Y deja afuera solo elementos en A.
Actualizar de la siguiente manera,
useEffect( () => { getAPICall().then( (r) => { const result = r.filter(o1 => anotherObj.find(o2 => o1.name !== o2.name)); setOption(result); }); }, []);