Cómo resolver el toggle icono en add/remove a favorito en React

Hola, estoy teniendo algunos problemas al agregar / borrar un favorito. Cuando toggle el icono del corazón hace lo que se supone en el backend, por lo que añade o elimina correctamente un artículo de los favoritos. El tema es que si agrego un artículo a los favoritos, el icono se convierte en un corazón completo, que es correcto, pero si quito un artículo de los favoritos, todos los iconos retroceden a un corazón vacío, aunque la eliminación del único artículo funcionó, pero sólo refrescando la página mostrará exactamente cuáles son los favoritos con todo el corazón. ¿Alguna idea de cuál es el problema? este es el código:


{
      favourite && favourite.filter(fav => fav._id === property._id).length > 0
       ?
        deleteFavourite(property._id)}>
       :
        postFavourite(property._id)}>                    
}

Redux postFavorito y eliminar Favorito

export const postFavourite = (propertyId) => (dispatch) => {

    const bearer = 'Bearer ' + localStorage.getItem('token')

    return fetch(baseUrl + 'my-favourites/' + propertyId, {
        method: 'POST',
        body: JSON.stringify({"_id": propertyId}),
        headers: {
            "Content-Type": "application/json",
            'Authorization': bearer
        },
        credentials: 'same-origin'
    })
    .then(response => {
        if (response.ok) {
            return response
        }
        else {
            var error = new Error('Error ' + response.status + ': ' + response.statusText)
            error.response = response
            throw error
        }
    },
    error => {
        throw error;
    })
    .then(response => response.json())
    .then(favourites =>  dispatch(addFavourites(favourites) ))
    .catch(error => dispatch(favouritesFailed(error.message)))
}

export const deleteFavourite = (propertyId) => (dispatch) => {

    const bearer = 'Bearer ' + localStorage.getItem('token')

    return fetch(baseUrl + 'my-favourites/' + propertyId, {
        method: "DELETE",
        headers: {
          'Authorization': bearer
        },
        credentials: "same-origin"
    })
    .then(response => {
        if (response.ok) {
          return response
        } else {
          var error = new Error('Error ' + response.status + ': ' + response.statusText)
          error.response = response
          throw error
        }
      },
      error => {
            throw error
      })
    .then(response => response.json())
    .then(favourites =>  dispatch(addFavourites(favourites)) )
    .catch(error => dispatch(favouritesFailed(error.message)))
}

este es el reductor

import * as ActionTypes from './ActionTypes'

export const Favourites = (state = {
    isLoading: true,
    errMess: null,
    favourites: []
}, action) => {
    switch(action.type) {
        case ActionTypes.ADD_FAVOURITES:
            return {...state, isLoading: false, errMess: null, favourites:  action.payload}
        
        case ActionTypes.FAVOURITES_LOADING:
            return {...state, isLoading: true, errMess: null, favourites: []}

        case ActionTypes.FAVOURITES_FAILED:
            return {...state, isLoading: false, errMess: action.payload, favourites: []}

        default: 
            return state
    }
}

Pregunta hecha hace 3 años, 4 meses, 28 días - Por javagiant

2 Respuestas:

  • El problema con el icono del corazón que no se actualiza correctamente al eliminar un artículo de favoritos puede deberse a que el estado favourite no se está actualizando correctamente en tu componente cuando se elimina un artículo de favoritos.

    Para solucionarlo, necesitas asegurarte de que estás actualizando el estado favourite de manera adecuada en tu componente después de realizar la acción de eliminar favorito. Una forma común de hacerlo es mediante el uso de Redux, que parece que estás utilizando en tu código.

    Para actualizar el estado de favoritos en tu aplicación de React utilizando Redux, asegúrate de seguir estos pasos:

    • Asegúrate de que tu componente está conectado al store de Redux y está obteniendo el estado de favoritos correctamente a través de `mapStateToProps`.
    • En tu acción de `deleteFavourite`, después de realizar la eliminación con éxito, actualiza el estado de favoritos en el store de Redux llamando a la acción `addFavourites` con los favoritos actualizados.

    Por lo tanto, en tu acción deleteFavourite, después de recibir y procesar la respuesta del servidor correctamente, asegúrate de llamar a dispatch(addFavourites(favourites)) con los favoritos actualizados.

    Además, asegúrate de que estás manejando adecuadamente la carga, los errores y otros estados en tu componente para reflejar correctamente el estado actual de los favoritos.

    Con estos ajustes, deberías poder garantizar que el icono del corazón en tu componente refleje correctamente el estado de favoritos después de añadir o eliminar un artículo de favoritos.

    Respondida el Dec 19, 2020 a las 23:33 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Problema:

    El problema descrito es que al eliminar un artículo de los favoritos, todos los iconos de corazón vuelven a ser un corazón vacío, aunque sólo se haya eliminado un elemento.

    Causa:

    El problema se debe a la forma en que se gestiona el estado del icono del corazón. El código sólo comprueba si el artículo actual está en la lista de favoritos y muestra el icono lleno en consecuencia. Sin embargo, cuando un artículo se elimina de los favoritos, el estado de los demás artículos no se actualiza.

    Solución:

    Existen dos posibles soluciones para este problema:

    Solución 1: Actualizar el estado de todos los artículos

    En el reductor Favourites, actualiza el estado de todos los artículos cuando se elimina un favorito. En lugar de simplemente establecer favourites en la nueva lista, puedes utilizar map() para iterar sobre los artículos existentes y establecer el estado de cada uno en función de si está en la nueva lista:

    js
export const Favourites = (state = {
  isLoading: true,
  errMess: null,
  favourites: []
}, action) => {
  switch (action.type) {
    case ActionTypes.ADD_FAVOURITES:
      return { ...state, isLoading: false, errMess: null, favourites: action.payload };

    case ActionTypes.FAVOURITES_LOADING:
      return { ...state, isLoading: true, errMess: null, favourites: [] };

    case ActionTypes.FAVOURITES_FAILED:
      return { ...state, isLoading: false, errMess: action.payload, favourites: [] };

    case ActionTypes.DELETE_FAVOURITE:
      return {
        ...state,
        favourites: state.favourites.map(favourite => {
          // Si el artículo está en la nueva lista, establece su estado como lleno
          if (action.payload.includes(favourite._id)) {
            return { ...favourite, isFavourite: true };
          }

          // De lo contrario, establece su estado como vacío
          return { ...favourite, isFavourite: false };
        })
      };

    default:
      return state;
  }
};

    Solución 2: Gestionar el estado del icono individualmente

    En lugar de gestionar el estado del icono del corazón en el reductor, puedes gestionarlo individualmente en el componente React. Mantén un estado local en el componente para cada artículo que indique si es un favorito o no. Cuando un artículo se añade o elimina de los favoritos, actualiza el estado local en consecuencia.

    Ejemplo:

    js
import React, { useState } from 'react';

const PropertyItem = ({ property }) => {
  const [isFavourite, setIsFavourite] = useState(false);

  const handleFavouriteClick = () => {
    // Lógica para añadir o eliminar el artículo de los favoritos
    // ...

    // Actualiza el estado local para reflejar el nuevo estado del favorito
    setIsFavourite(!isFavourite);
  };

  return (
    
    
      
      {/ Resto del componente /}
    
    
  );
};

    Respondida el Dec 19, 2020 a las 23:43 - por Gemini

    Votos positivos: 0 | Votos negativos: 0