Me gustaría mapear una matriz desde una llamada API de back-end.
Esto proviene de un esquema que actualmente tiene el formato de
teamMemberDetails: { member_v2: { memberEmail: [String], default: [], memberName: [String], default: [], memberID: [String], default: [], memberRole: [String], default: "" }, },Dentro de esto, tengo un objeto, sin embargo, se ve así, por ejemplo:
"member_v2": { "memberEmail": [ "natx@hotmail.com", "sebaxo4897@ukgent.com" ], "memberID": [ "62fe3c888e2776ef3c1a010f", "6301dcd00e05d7cd322cc45b" ], "memberName": [ "Natx Trial", "sebaxo" ], "memberRole": [ "QA Tester", "trialer" ] },Dado lo anterior, me gustaría mapear estos datos en un componente. He intentado almacenarlo en una const, luego mapearlo, sin embargo, se producirá un error. Por ejemplo:
const CompanyUserMembers = () => { const companyFull = useSelector(state=>state.companyuser.currentUser.teamMemberDetails.member_v2) console.log(companyFull) return ( <GeneralContainer> {companyuserMembers.map(member=>( <TeamMemberCard member={companyFull} key={companyFull.memberID}/> ))} </GeneralContainer> ) } export default CompanyUserMembersEsto luego se pasa a un componente que muestra a cada usuario en la tarjeta. ¿Qué estoy haciendo mal y cómo debo reformatear?
Hola, lo primero que puedo notar en tu código es que declaras "comapnyFull" y estás iterando sobre "companyMembers".
el codigo deberia ser:
const CompanyUserMembers = () => { const companyFull = useSelector(state=>state.companyuser.currentUser.teamMemberDetails.member_v2) console.log(companyFull) return ( <GeneralContainer> {companyFull.memberName.map(member=>( <TeamMemberCard member={member} key={member}/> ))} </GeneralContainer> ) } export default CompanyUserMemberssin embargo, no estoy seguro de que eso sea lo que está buscando, el acceso a sus matrices debe ser:
companyFull["memberName"].map(...) // Would give you ["Natx Trial", "sebaxo"] companyFull["memberID"].map(...) // Would give you ["62fe3c888e2776ef3c1a010f","6301dcd00e05d7cd322cc45b"]o
companyFull.memberName.map(...) // Would give you ["Natx Trial", "sebaxo"] companyFull.memberID.map(...) // Would give you ["62fe3c888e2776ef3c1a010f","6301dcd00e05d7cd322cc45b"]si desea iterar sobre un parámetro y obtener algo de otro parámetro, hágalo así:
{companyFull["memberName"].map((name, i) => ( <TeamMemberCard member={name} key={companyFull["memberID"][i]}/> ))}Espero que quede más claro
Basado en los comentarios, la reasignación de member_v2 a la matriz:
const member_v2 = { "memberEmail": [ "natx@hotmail.com", "sebaxo4897@ukgent.com" ], "memberID": [ "62fe3c888e2776ef3c1a010f", "6301dcd00e05d7cd322cc45b" ], "memberName": [ "Natx Trial", "sebaxo" ], "memberRole": [ "QA Tester", "trialer" ] } const CompanyUserMembers = () => { const members = useMemo(() => { const array = []; for (let i = 0; i < member_v2.memberEmail.length; i++) array.push({memberEmail:member_v2.memberEmail[i], memberID: member_v2.memberID[i], memberName: member_v2.memberName[i],memberRole:member_v2.memberRole[i]}); return array; }, [member_v2]) console.log(members) ... return ( {members.map(member => (...))} ) }usando destructure y combinando en compcode
const CompanyUserMembers = () => { const companyFull = useSelector(state=>state.companyuser.currentUser.teamMemberDetails.member_v2) const { memberEmail, memberID, memberName, memberRole} = companyFull; return ( ... {memberEmail.map((_, index) => ( <TeamMemberCard memberEmail={memberEmail[index]} key={memberID[index]} memberName={memberName[index]} memberRole={memberRole[index]}/> ))} ... ) }