渲染对象与map()和JSX - React

Question

我有一个对象:

const data = {
1: "apples",
2: "bananas",
3: "cherries"
}

我想遍历这些项目并在渲染JSX时使用它们。如果它是典型的数组，我会使用map()但现在它给了我一个错误:

"Property 'map' doesnot exists..."

在这种情况下我能做什么?提前谢谢你

Answer 1

for (const key in data) {
console.log(`${key}: ${data[key]}`);
}

最好知道

Object.keys(data)将获得键数组->['1'， '2'， '3']

Object.values(data)会让你数组的值→['苹果'，'香蕉'，'樱桃']

Answer 2

是的，它给你的错误，因为map()方法只能在数组和数据是一个对象上运行。

将代码改为

Object.entries(data).map(([key, value]) => console.log(key, value))

只获取键

Object.keys(data).map(key => console.log(key))

只获取值

Object.values(data).map(value => console.log(value))

Answer 3

你可以考虑使用Object。在将对象映射到UI之前将其转换为数组

const data = {
1: "apples",
2: "bananas",
3: "cherries"
}
console.log(Object.values(data))

Answer 4

您可以使用Object.entries

return (
<div>
{
Object.entries(data).map(([key, value]) => {
<p>{key}: {value}</p>
})
}
</div>
);