Mi código es el siguiente:
if(existingWishlistItem) { return wishlistItems.map(wishlistItem => wishlistItem.id === wishlistItemToAdd.id ? toast.error('This item is already in your wishlist') : wishlistItem ) }Quiero que esta función verifique si hay un elemento de la lista de deseos existente en la matriz, luego aparece un mensaje de error para el usuario y devuelve la matriz wishlistItem. Pero descubrí que solo puedo escribir una acción después del '?', entonces, ¿hay alguna forma de mostrar el mensaje y devolver el elemento de la lista de deseos al mismo tiempo?
¡Gracias por la ayuda!
Es posible hacer esto con el operador condicional, pero no es una buena idea. Es difícil de leer, difícil de depurar y fácil equivocarse.
En su lugar, solo usa un if :
if (existingWishlistItem) { for (const {id} of wishlistItems) { if (id === wishlistItemToAdd.id) { toast.error('This item is already in your wishlist'); break; // I assume the ID values are unique, so you can stop here // Or: `return wishlistItems;` if you don't need to make a // copy in this case } } return wishlistItems; // If you don't need to make a copy // Or: `return wishlistItems.slice()` if you do need to make a copy } (O, nuevamente suponiendo que los valores de id sean únicos, podría usar find en lugar del bucle for-of para encontrar el elemento existente).
Para completar, puede usar el operador de coma para hacer dos cosas en cualquier expresión (incluidos los operandos del operador condicional): (first, second) . El operador coma evalúa su operando de la izquierda, descarta ese resultado y luego evalúa su operando de la derecha y toma ese valor como resultado. Aplicando eso a tu ejemplo:
// DON'T DO THIS if (existingWishlistItem) { return wishlistItems.map(wishlistItem => wishlistItem.id === wishlistItemToAdd.id ? (toast.error('This item is already in your wishlist'), wishlistItem) : wishlistItem ); }Esto no es para lo que son el map o los ternarios.
Idiomáticamente, los ternarios se utilizan para el comportamiento condicional que no tiene efectos secundarios . ¿Te gusta return upperCase ? "HELLO" : "hello" . Esto se debe a que los ternarios complejos son difíciles de leer y, por lo tanto, es difícil saber, de un vistazo, dónde está ocurriendo el efecto secundario.
Del mismo modo, el map es para transformar objetos en una secuencia de acuerdo con alguna función. Es una buena práctica que el map no tenga efectos secundarios, porque el código es más fácil de leer cuando los efectos secundarios están claramente separados de la transformación de datos.
Una implementación mucho más idiomática de su código sería:
if(existingWishListItem) { if (wishlistItems.some(x => x.id === wishlistItemToAdd.id) { toast.error(msg) } return wishListItems }Su problema es que está utilizando un map que completa una nueva lista de datos con la misma longitud de matriz. Si desea encontrar un elemento existente, simplemente use find . Por ejemplo
if(existingWishlistItem) { const foundWishlistItem = wishlistItems.find(wishlistItem => wishlistItem.id === wishlistItemToAdd.id) if(foundWishlistItem) { toast.error('This item is already in your wishlist') //TODO: You can return or do whatever after found existing wishlist item } return wishlistItems } Además de eso, si desea tener un valor verdadero/falso en lugar de encontrar un objeto existente, puede usar some en su lugar
if(existingWishlistItem) { const isFoundWishlistItem = wishlistItems.some(wishlistItem => wishlistItem.id === wishlistItemToAdd.id) if(isFoundWishlistItem) { toast.error('This item is already in your wishlist') //TODO: You can return or do whatever after found existing wishlist item } return wishlistItems }