Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

162
Vistas
La lista renderizada condicionalmente en React se comporta con un método, pero no con otro

Tengo una lista de productos para renderizar. También tengo una serie de palabras clave que se utilizan para excluir productos de la representación.

Estoy recorriendo la matriz de palabras clave y comprobando si el título del producto contiene alguna de las entradas. Luego devuelve un valor booleano.

El siguiente código no funciona. El archivo console.log funciona y refleja el resultado, pero no se procesa nada.

 function inExcludes(product, excludedItems) { excludedItems.forEach( item => { if (product.includes(item)) { console.log(true); return true; } else { console.log(false); return false; } }) }
 export function CardsFiltered(props) { const cards = props.items.map((product) => { if (inExcludes(product.title, props.excludedItems) === false) return ( <CardValidation key={product.id} id={product.id} product={product} /> ) }) return ( <> {cards} </> ); }

Pero si configuro una variable como booleana, cambio esa variable si la condición es verdadera y luego devuelvo esa variable, funciona y mis tarjetas se procesan (código a continuación).

¿Alguien puede arrojar luz sobre esto? Porque no puedo resolverlo.

 function inExcludes(product, excludedItems) { let result = false; excludedItems.forEach( item => { if (product.includes(item)) { result = true; } }) return result; }
 export function CardsFiltered(props) { const cards = props.items.map((product) => { if (!inExcludes(product.title, props.excludedItems)) return ( <CardValidation key={product.id} id={product.id} product={product} /> ) }) return ( <> {cards} </> ); }
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Su primera implementación de 'inExcludes' no devuelve un valor booleano (verdadero/falso). Simplemente está ejecutando 'forEach' en cada elemento de la matriz de elementos excluidos. El retorno dentro de ese ciclo no regresa de la función como un todo.

Entonces, como efectivamente devuelve 'indefinido', su renderizado decide no renderizar nada.

Aquí hay algo que hace lo que buscas (simplificado un poco):

https://codesandbox.io/s/awesome-mcclintock-hkkhsi?file=/src/App.js

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda