如何在反应中正确映射对象但仅显示特定值

Question

几天前，我问了一个关于 return 表单问题的问题。在没有意识到我正在尝试 map 一个对象之后，我能够使用以下代码映射该对象：

{Object.entries(stats1).map(([key, value], i) => {
  return (
   <Text>{key} : {value}</Text>
  )
})}

// stats1 prop is set like this with the use of state
setStats1(response?.data.data.data.stats.all.solo)

但是目前它的呈现方式与我希望的不一样，就像下面的第一张图片一样，我怎么想排除键并只显示带有我自己的特定键的特定值，例如 Solo Kills Total: 5067 而不是 kills: 5067。我这可能吗？在过去的几天里，我一直无法找到导致我想要的方式的明确答案。

任何帮助都将不胜感激！

// Json response from stats1 prop
{
    "score": 52697,
    "scorePerMin": 22.932,
    "scorePerMatch": 16.545,
    "wins": 115,
    "top10": 623,
    "top25": 1163,
    "kills": 5067,
    "killsPerMin": 2.205,
    "killsPerMatch": 1.591,
    "deaths": 3070,
    "kd": 1.65,
    "matches": 3185,
    "winRate": 3.611,
    "minutesPlayed": 2298,
    "playersOutlived": 19072,
    "lastModified": "2022-04-10T13:52:22Z"
}

Answer 1

创建一个映射器对象，将您的 json 键映射到 custom 键并使用该对象进行渲染


const mapper = {
   kills: "Solo Kills Total"
}

{Object.entries(stats1).map(([key, value], i) => {
  return (
   <Text> {mapper[key] ? mapper[key] : key} : {value}</Text>
  )
})}

Answer 2

考虑到我们正在像这样获取您想要的数据：

const obj = {
  "kills": 5067,
}

通过这样的方式：

response?.data.data.data.stats.all.solo.kills //added kills

然后我们可以这样重命名 kills:

delete Object.assign(obj, {SoloKillsTotal: obj.kills})['kills'];

console.log(obj);

如何在反应中正确映射对象但仅显示特定值

How to properly map through objects in react but only show a specific value

json

object

reactjs