我想渲染“rotas”中的所有“name”元素，但是當我嘗試時，它說地圖未定義。任何幫助都值得贊賞。
export default function SelecionaRota(props) {
const data = {
locais: [
{
name: 'Rio de Janeiro',
rotas: [
{
name: 'RJ-SP',
valor: 1200
},
{
name: 'RJ-BSB',
valor: 1400
}
]
}
]
}
const location = useLocation()
const { estadoOrigem } = location.state
return (
<div>
<h1>{estadoOrigem}</h1>
{ rota.locais.rotas.map(module => (
<h1>{module.nome}</h1>
))}
</div>
)
}
uj5u.com熱心網友回復：
這是嵌套map().
注意：不要忘記為每個映射元素添加唯一鍵（并且不要使用 index）。
function SelecionaRota({ data }) {
//const location = useLocation();
//const { estadoOrigem } = location.state;
return (
<div>
<h1>estadoOrigem</h1>
{data.locais.map((locais) => (
<div key={locais.name}>
<h2>{locais.name}</h2>
{locais.rotas.map((module) => (
<h3 key={module.name}>{module.name}</h3>
))}
</div>
))}
</div>
);
}
const data = {
locais: [
{ name: 'Rio de Janeiro', rotas: [{ name: 'RJ-SP', valor: 1200, }, { name: 'RJ-BSB', valor: 1400, },], },
{ name: 'City 2', rotas: [{ name: 'C2-BC', valor: 1200, }, { name: 'C2-EFG', valor: 1400, },], },
],
};
ReactDOM.render(<SelecionaRota data={data}/>, document.getElementById('root'));<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id="root"></div>uj5u.com熱心網友回復：
頂級變數稱為“data”而不是“rota”，“locais”是陣列而不是物件。要訪問輪播：
data.locais[0].rotas.map()
data.locais[1].rotas.map()
//etc
您可能想要遍歷 losais 以訪問其中的每個專案。
uj5u.com熱心網友回復：
首先 rota.locais.rotas.map 是錯誤的。您需要使用data.locais[0].rotas。
現在data.locais[0].rotas是一個陣列，您需要為每個陣列迭代它。所以它會是這樣的：
Array.from(data.locais[0].rotas).forEach(element => {
<h1>{element.name}</h1>
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/379602.html
標籤：javascript 反应
下一篇：為什么我的函式總是回傳未定義？