我正在遍歷 people 陣列并獲得第一個陣列。我的螢屏應該顯示“person 1”。但它是空白的，沒有回傳任何內容。
const people = [
[
{
name: 'person 1'
}
],
[
{
name: 'person 2'
}
],
]
export default function Index() {
return (
<>
{people.slice(0,1).map((person) => {
return <h1>{person.name}</h1>
})}
</>
)
}
當我這樣做時代碼有效，但我需要使用 slice
export default function Index() {
return (
<>
{people[0].map((person) => {
return <h1>{person.name}</h1>
})}
</>
)
}
uj5u.com熱心網友回復：
people.slice(0, 1)，與您期望的不同，回傳[[{ name: "person 1" }]]，而不是 [{ name: "person 1" }]（Array#slice回傳陣列的“切片”，在您的特殊情況下，它是具有單個值的陣列，但不是單個值本身）。您必須訪問內部陣列才能獲得所需的內容：
// in your JSX
people.slice(0, 1).map(([person]) => (
<h1>{person.name}</h1>
))
請注意，該引數解構了輸入陣列（假設其中的每個值people都是一個只有一個元素的陣列；如果不是，則回圈該內容）。
另一種選擇是Array#flatMap“取消嵌套”這些值：
// in your JSX
people.slice(0, 1).flatMap(person => (
<h1>{person.name}</h1>
))
uj5u.com熱心網友回復：
這將起作用：
return (
<>
{people.slice(0,1).map((person) => {
return <h1>{person[0].name}</h1>
})}
</>
)
因為 eachperson仍然是一個陣列，所以如果不先訪問包裝它的陣列，就無法直接訪問物件的屬性。
uj5u.com熱心網友回復：
您必須修改people.
const people = [
{
name: 'person 1'
},
{
name: 'person 2'
}
];
在你的情況下，person地圖方法是Array型別。所以，person.name的值將是undefined。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/526158.html
標籤：javascript数组
上一篇：實作一個簡單Database7