• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

187
Vistas
obtener un valor indefinido de la función importada en reaccionar

Estoy filtrando datos en función de los textos escritos en el cuadro de búsqueda. Primero estoy filtrando los datos y luego mapeándolos. Mi código funciona como se esperaba, pero existe la repetición de una función, así que lo coloco en la carpeta util y luego lo uso en el archivo. Pero el problema es que el valor que obtengo no está undefined por esa función de utilidad.

Código anterior de Members.js:

 import React from 'react' import members from '../members.json' function Member({searchTerm}) { return ( <div> { members.filter((ele) => ele.first_name .toLowerCase() .includes(searchTerm.toLocaleLowerCase()) || ele.last_name .toLowerCase() .includes(searchTerm.toLocaleLowerCase())) .map(ele => { return ( <div key={ele.id}> <h1>Name: {ele.first_name} {ele.last_name}</h1> </div> ) }) } </div> ) } export default Member

Mi nuevo enfoque con Utils

utils/helper.js:

 const searchMembers = (membersArr, searchTerm) => { return membersArr.filter( (ele) => ele.first_name .toLowerCase() .includes(searchTerm.toLocaleLowerCase()) || ele.last_name.toLowerCase().includes(searchTerm.toLocaleLowerCase()) ); } export { searchMembers }

Miembros.js

 import React from 'react' import members from '../members.json' import {searchMembers} from '../utils/helper' function Member({searchTerm}) { const {searchMember} = searchMembers(members, searchTerm) console.log('searchMember:', searchMember) //undefined return ( <div> { searchMember.map(ele => { return ( <div key={ele.id}> <h1>Name: {ele.first_name} {ele.last_name}</h1> </div> ) }) } </div> ) } export default Member

Para el enfoque anterior, recibo el error searchMember.filter is not a function .

¿Pueden por favor ayudarme?

Gracias

almost 3 years ago · Santiago Gelvez
1 Respuestas
Responde la pregunta

0

Su método searchMembers devuelve los resultados filtrados directamente. Mientras que su código

 const {searchMember} = searchMembers(members, searchTerm)

intenta extraer un miembro de searchMember de los datos devueltos ( a través de la desestructuración ).

usar

 const searchMember = searchMembers(members, searchTerm)
almost 3 years ago · Santiago Gelvez 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 Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda