我必須映射一個物件并顯示串列中所有物件鍵的所有值。物件看起來像這樣。
const books = {
book1: ['comedy', 'action', 'romance'];
book2: ['horror', 'advanture', 'crime'];
book3: ['fantasy, 'humour', 'war'];
}
Object.values我嘗試使用這樣的所有鍵創建一個單獨的陣列。
const objValues = Object.values)books
但結果是這樣的
Array[2]
array[0]
['comedy', 'action', 'romance']
Array[2]
array[1]
['horror', 'adventure', 'crime']
so on...
我還嘗試通過這個objValues陣列進行映射，并將每個值添加到一個新陣列中，我可以在 JSX 中使用forEach該陣列進行映射，但這不起作用。
const allValues = () => {
const res: any = [];
objValues.forEach(key: any) => {
key.forEach((value: any) => {
res.push(value);
});
});
return res;
};
我如何映射所有這些值并將它們顯示在串列中？也許這有幫助。
這就是我想要的樣子
{object.map((value) => {
<div>
<span>{value}</span>
</div>
})}
comedy
action
romance
horror
adventure
crime
uj5u.com熱心網友回復：
根據您對輸出的描述，您可以使用 for in 回圈遍歷物件，以索引“books”物件中的每個“book”陣列。然后，您將擁有可供我們使用的陣列進行映射。
就像是 ：
const genres = []
for(let book in books){
books[book].map(title=>{
genres.push(title)
})
}
console.log(genres)
uj5u.com熱心網友回復：
您可以使用 flat then map 來實作您想要的，不要忘記將唯一鍵傳遞給 div。
Object.values(books).flat().map(v => <div key={v}> <span>{v}</span> </div>)
uj5u.com熱心網友回復：
使用Object.values然后使用Set洗掉重復項，之后您可以迭代使用map以在頁面中呈現。
const books = {
book1: ['crime', 'comedy', 'action', 'romance'],
book2: ['horror', 'advanture', 'crime'],
book3: ['fantasy', 'humour', 'war']
}
const result = [...new Set(Object.values(books).flat())];
console.log(result);最終代碼看起來像這樣
<ul>
{
[...new Set(Object.values(books).flat())].map(item => <li key={item}> {item} </li>)
}
</ul>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/506756.html
標籤：javascript 反应 数组 打字稿 javascript 对象