現在我這樣寫：
const array = [
{name: 'somename', lastname: 'sometext'}
{name: 'somename1', lastname: 'sometext1'}
{name: 'somename2', lastname: 'sometext2'}
]
function Component({array}) {
return (
{array.map(( {name, lastname} ) => (
<p>{name}<p>
<p>{lastname}<p>
))}
)
}
但我想用任何鍵傳遞物件陣列：
{array.map(( {unknownKey, unknownKey1} ) => (
<p>{unknownKey}<p>
<p>{unknownKey1}<p>
))}
如何正確書寫？
uj5u.com熱心網友回復：
如果要顯示<p>s 中物件的所有值，則映射Object.values被迭代的物件的 （不要解構）。
const array = [
{name: 'somename', lastname: 'sometext'},
{name: 'somename1', lastname: 'sometext1'},
{name: 'somename2', lastname: 'sometext2'}
];
const Component = ({array}) => (
array.map(
object => Object.values(object).map(val => <p>{val}</p>)
)
);
ReactDOM.createRoot(document.querySelector('.react')).render(<Component {...{ array }} />);<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div class='react'></div>如果您可以要求傳遞的物件也有一個鍵（要渲染的給定物件的唯一識別符號），那就太好了 - 這樣 React 將能夠更有效地重新渲染它們。
uj5u.com熱心網友回復：
您首先需要從每個物件中提取所有鍵，然后從該物件中提取其值。
{array.map((obj) => {
const keys = Object.keys(obj)
return keys.map(key => <p>{obj[key]}</p>);
})
}
uj5u.com熱心網友回復：
我建議一個解決方案是為要渲染的鍵定義道具
function Component({array, firstKey, secondKey}) {
return (
{array.map(( item ) => (
<p>{item[firstKey]}<p>
<p>{item[secondKey]}<p>
))}
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/513969.html