我想讓我的代碼在我搜索一個值時呈現資料，使用 for 嘗試它，但它一直顯示意外的標記。有沒有辦法正確地做到這一點？這可能是一個簡單的問題，但我真的不知道如何進行這項作業。
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>
)
}
錯誤：
./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 | <>
uj5u.com熱心網友回復：
首先find是串列中的專案，然后使用mapover rotas
return (
<div>
<h1>{estadoOrigem}</h1>
{rota.locais
.find((item) => estadoOrigem === item.nome)
?.rotas.map((module) => {
<>
<h1>{module.nome}</h1>
<h2>{module.valor}</h2>
</>;
})}
</div>
);
uj5u.com熱心網友回復：
您可以在渲染之前進行“過濾”或搜索。
const region = rota.locais.find(location => location.nome === estadoOrigem);
然后在您的return.
如果您可以有多個區域，請使用：
const regions = rota.locais.filter(location => location.nome === estadoOrigem);
uj5u.com熱心網友回復：
我從來不需要在組件的 jsx 中使用 for 回圈。通常，您需要一個組件來執行您想要在 javascript 部分中完成的任何過濾，然后回圈遍歷剩余的資料。
所以我會這樣做：
let locations = []
const filterLocations = () => {
for (var i = 0; i < rota.locais.length; i ){
if(estadoOrigem === rota.locais[i].nome){
locations.push(i);
}
}}
然后 jsx 只會做：
locations.map((i) => (( i.doStuff ))
你總是想從效率最低的做事方式開始，然后嘗試一點一點地重構，而不是試圖立即找出一些聰明的方法。喜歡而不是這樣做 for 回圈。
您還可以使用 javascript .filter() 方法過濾掉您需要的任何資料，然后將其推送到陣列以進行映射。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/379597.html
標籤：javascript 反应