Tengo un useEffect en un gancho de reacción personalizado donde quiero configurar el enlace URL en un botón para que dependa de la etiqueta que obtengo del usuario en un objeto. El objeto de usuario es una matriz con varios objetos, todos con la clave "Nombre", pero solo quiero obtener el valor de las claves (Nombre) que es igual a 'pequeño', 'medio' o 'alto' (si existen en el objeto de usuario).
En este momento estoy haciendo esto, que funciona, pero creo que debe ser una forma más fácil comparando o recorriendo una matriz u objetos y tal vez configurando la URL y el valor de "Nombre" a las variables, para que no tenga usar tantas líneas si se convirtiera en un proyecto más grande, pero no puedo encontrar una buena manera con menos código que funcione.
Así que para ser más claro; lo que quiero hacer es: si el objeto de usuario contiene un valor, por ejemplo, que se llama 'medio', quiero establecer la URL en ${mediumUrl}?a=${user.UserID} .
Utilizo hasTag para ver si existe algún valor (pequeño, medio, alto), de modo que pueda establecerlo en verdadero o falso, lo que decide mostrar la página o el botón con la URL, ya que no quiero la página. o el botón que se mostrará si el usuario no tiene ninguno de los valores correctos.
Espero que esto no sea demasiado confuso y, si lo es, hágamelo saber y puedo tratar de aclararlo. Soy bastante nuevo en JavaScript. ¡Gracias!
const [showPage, setShowPage] = useState(true); const hasTag = userTags.some( //UserTag is the interface for the user-tags. (tag: UserTag) => tag.Name === 'small' || tag.Name === 'medium' || tag.Name === 'high' ); switch (userTags.some(tag => tag?.Name)) { case userTags.some(tag => tag?.Name === 'small'): setWheelUrl(`${smallUrl}?a=${user.UserID}`); setLoading(false); break; case userTags.some(tag => tag?.Name === 'medium'): setWheelUrl(`${mediumUrl}?a=${user.UserID}`); setLoading(false); break; case userTags.some(tag => tag?.Name === 'high'): setWheelUrl(`${highUrl}?a=${user.UserID}`); setLoading(false); break; default: setLoading(false); } if(!hasTag) { setShowPage(false) }Podemos encontrar directamente la etiqueta deseada y luego usar la propiedad de nombre dentro de ella en el conmutador.
const [showPage, setShowPage] = useState(true); // should directly find the tag with correct value using 'find' operator const tag = userTags.find( (tag: UserTag) => tag.Name === 'small' || tag.Name === 'medium' || tag.Name === 'high' ); switch (tag?.Name)) { // no need to calculate in every case case 'small': setWheelUrl(`${smallUrl}?a=${user.UserID}`); setLoading(false); break; case 'medium': setWheelUrl(`${mediumUrl}?a=${user.UserID}`); setLoading(false); break; case 'high': setWheelUrl(`${highUrl}?a=${user.UserID}`); setLoading(false); break; default: setLoading(false); } if(!tag) { setShowPage(false) }