Así que tengo estos datos de API, que se almacenan en la tienda redux. El primer elemento en los datos de estado de redux se usa luego en useEffect para establecer un estado local usado en el renderizado inicial. Ahora, en una función de controlador de clic de botón, estoy tratando de usar ese estado local para filtrar los datos del estado redux. Luego, el primer elemento de los datos filtrados debe enviarse al estado local.
Explicaré el código aquí. Supongamos que obtengo los datos de la API de la tienda redux de esta manera:
const categoriesState = useSelector( state => state.getCats ); const { categories } = categoriesState;Luego, en useEffect, uso el primer elemento de las categorías para almacenarlo en un estado local:
const [ catItems, setCatItems ] = useState( [] ); useEffect(() => { if ( categories && categories.length !== 0 ) { setCatItems( [ categories[ 0 ] ] ); } }, [] ); catItems luego se usa para representar algo. Pero también hay un botón que, al hacer clic, agregará una nueva categoría a catItems del estado de categories , pero omitirá el elemento que ya está en él.
Aquí está el controlador de clics:
const handleAddCat = ( e ) => { if ( categories && categories.length !== 0 ) { const catCopy = [ ...catItems ]; const filterCategories = categories.filter( item => { for ( let el of catCopy ) { return item.category !== el.category; } }); catCopy.push( filterCategories[ 0 ] ); setCatItems( catCopy ); } }En el primer clic, el filtro funciona perfectamente. Pero al hacer clic en el segundo botón, obtengo los mismos datos. Por ejemplo, si los datos iniciales del estado local son 1, al hacer clic en el primer botón obtengo 1 y 2. Pero al hacer clic en el segundo botón obtengo 1, 2 y 2. Se agregará 2 en los clics posteriores. Considerando que, 2 debe filtrarse. Luego 3, luego 4 y así sucesivamente.
¿Qué estoy haciendo mal aquí?
Simplemente puede encontrar la categoría que no coincide en lugar de (crear las categorías de filterCategories y luego elegir la primera). Aquí está la implementación.
const handleAddCat = ( e ) => { if ( categories && categories.length !== 0 ) { const newCategory = categories.find(category => !cat.includes(category)); if(newCategory) setCatItems((prevItems) => [...prevItems, newCategory]); } }for loop no devuelve nada del filtro. En tu caso puedes hacer algo como esto:
const filterCategories = categories.filter((item) => { return Boolean(catCopy.find((el) => item.category !== el.category)); });