Quiero hacer que mi código represente los datos cuando busco un valor, lo probé usando for, pero sigue mostrando un token inesperado. ¿Hay alguna manera de hacerlo correctamente? Puede ser una pregunta fácil, pero realmente no sé cómo hacer que esto funcione.
export default function SelecionaRota() { const rota = { locais: [ { nome: 'Rio de Janeiro', rotas: [ { nome: 'RJ-SP', valor: 1200 }, { nome: 'RJ-BSB', valor: 1400 } ] }, { nome: 'São Paulo', rotas: [ { nome: 'SP-RJ', valor: 1200 }, { nome: 'SP-BSB', valor: 1400 } ] } ] } const location = useLocation() const { estadoOrigem } = location.state return ( <div> <h1>{estadoOrigem}</h1> {for (var i = 0;i < rota.locais.length;i++) { if (estadoOrigem === rota.locais[i].nome) { rota.locais[i].rotas.map(module => ( <> <h1>{module.nome}</h1> <h2>{module.valor}</h2> </> )) } }} </div> ) }Error:
./src/pages/Rota.js SyntaxError: D:\Arquivos\1 Estágio Teste\aeroporto-teste\src\pages\Rota.js: Unexpected token (39:13) 37 | <div> 38 | <h1>{estadoOrigem}</h1> > 39 | {for (var i = 0;i < rota.locais.length;i++) { | ^ 40 | if (estadoOrigem === rota.locais[i].nome) { 41 | rota.locais[i].rotas.map(module => ( 42 | <>Primero find el elemento de la lista, luego use el map sobre las rotaciones
Actualización: agregando la declaración de devolución faltante.
return ( <div> <h1>{estadoOrigem}</h1> {rota.locais .find((item) => estadoOrigem === item.nome) ?.rotas.map((module) => { return ( <> <h1>{module.nome}</h1> <h2>{module.valor}</h2> </> ); })} </div> );podría hacer el 'filtrado' o la búsqueda antes de la representación.
const region = rota.locais.find(location => location.nome === estadoOrigem); y luego use la variable 'región' dentro de su return .
Si puede tener varias regiones, utilice:
const regions = rota.locais.filter(location => location.nome === estadoOrigem);Nunca he necesitado usar un bucle for en el jsx de un componente. En general, querrá tener un componente que haga cualquier filtrado que desee en la pieza de JavaScript y luego recorrer los datos restantes.
Así que haría:
let locations = [] const filterLocations = () => { for (var i = 0; i < rota.locais.length; i++){ if(estadoOrigem === rota.locais[i].nome){ locations.push(i); } }}Entonces el jsx simplemente haría:
locations.map((i) => (( i.doStuff ))Siempre desea comenzar con la forma menos eficiente de hacer las cosas y luego tratar de refactorizar poco a poco en lugar de tratar de descubrir algo inteligente de inmediato. Como en lugar de hacer eso for loop.
También puede usar el método javascript .filter() para filtrar cualquier dato que necesite y luego enviarlo a una matriz para mapear.