使用 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>
   )
}

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