使用array.map函数ReactJS-TypeScript分别获取键和值

Question

我正在尽最大努力单独获取数据并在我的JSX中使用它，但似乎我做错了什么。

举个例子，从BE检索一个数组，如下所示：

const myArr = [ 
{ 
A: "Ananas", 
B: "Banana", 
C: "Citroen"
}
]

我的最终目标是绘制它的地图，并将其使用到我的JSX中，如下所示：

...
<Select onChange={(e: any) => handleChange(e)}>
{myArr.map((key,value) => ( 
<MenuItem key={key} value={value}>{value}</MenuItem>
))}
</Select>
...

在幕后，我更喜欢看起来像这样：

<MenuItem key="A" >Ananas</MenuItem>
<MenuItem key="B" >Banana</MenuItem>
<MenuItem key="C" >Citroen</MenuItem>

但我似乎在途中的某个地方迷路了。如果有人能帮我一把，我将不胜感激。干杯

Answer 1

首先，您的数组只有一个项，并且您希望对其entries进行迭代。

此外，您误解了.map()中回调函数的签名。第一个参数是元素，第二个参数是索引。您的情况不需要索引。

<Select onChange={(e: any) => handleChange(e)}>
{Object.entries(myArr[0]).map(([key,value]) => ( 
<MenuItem key={key} value={value}>{value}</MenuItem>
))}
</Select>

Answer 2

如果你想让它看起来像这个

<MenuItem key="A" >Ananas</MenuItem>
<MenuItem key="B" >Banana</MenuItem>
<MenuItem key="C" >Citroen</MenuItem>

我会先重新排列数据(个人偏好(，这样绘制地图会更容易。所以我的数据应该是类似的

myArr = [
{"name": "A".
"value": "Ananas"},
{"name": "B",
"value": "Banana"},
{"name": "C",
"value": "Citroen"}
]

myArr.map(item => {
return(
<MenuItem key={item["name"]}>{item["value"]}</MenuItem>
)
}

这只是我喜欢的更简单的方法，尽管可能还有其他答案