映射物件陣列以根據鍵值對生成React組件

編輯：下面的解決方案都不適合我，因為在擺弄了 ido ben ami 的解決方案之后，我得到了這個作業：

{
    array.map(project =>
        <Box>
            <Typography variant="subtitle1" sx={{fontWeight: 'bold', ml: 2}}
                        value={Object.keys(project)[0]}>{Object.keys(project)[0]}</Typography>
            {
                Object.entries(project)[0][1].map(ticket =>
                    <MenuItem sx={{ml: 3}} value={ticket}>{ticket}</MenuItem>)
            }
        </Box>
    )
}

我最初使用片段而不是 Box，但 Material UI 不喜歡 Select。如果我遺漏了這兩個中的一個，它就不起作用，因為生成的兩個組件不一樣。

我后端的資料是這樣的（專案/票的數量明顯不同）：

[
    {
        "Project 1": [
            "Ticket 1",
            "Ticket 2",
            "Ticket 3",
        ]
    },
    {
        "Project 2": [
            "Ticket 4"
            "Ticket 5"
            "Ticket 6"
        ]
    }
]

我需要映射它來為我的 Select 組件生成專案。這是我追求的結果，但我不知道如何使用 Object.entries 或 Object.keys/Object.values 來做到這一點：

<Typography variant="subtitle1" sx={{fontWeight: 'bold', ml: 2}} value="Project 1">Project 1</Typography>
<MenuItem sx={{ml: 3}} value="Ticket 1">Ticket 1</MenuItem>
<MenuItem sx={{ml: 3}} value="Ticket 2">Ticket 2</MenuItem>
<MenuItem sx={{ml: 3}} value="Ticket 3">Ticket 3</MenuItem>

<Typography variant="subtitle1" sx={{fontWeight: 'bold', ml: 2}} value="Project 2">Project 2</Typography>
<MenuItem sx={{ml: 3}} value="Ticket 4">Ticket 4</MenuItem>
<MenuItem sx={{ml: 3}} value="Ticket 5">Ticket 5</MenuItem>
<MenuItem sx={{ml: 3}} value="Ticket 6">Ticket 6</MenuItem>

uj5u.com熱心網友回復：

嘗試這個

<Box>
        {array.map((project, projectIndex) => (
            <Box key={projectIndex}>
                {console.log(Object.entries(project))}
                <Typography
                    variant="subtitle1"
                    sx={{ fontWeight: 'bold', ml: 2 }}
                    value={Object.entries(project)[0][0]}>
                    {Object.entries(project)[0][0]}
                </Typography>
                {Object.entries(project)[0][1].map((ticket, ticketIndex) => (<MenuItem key={ticketIndex} sx={{ ml: 3 }} value={ticket}>{ticket}</MenuItem>))}
            </Box> 
        ))}
    </Box>

但如果您有權在后端進行更改，我建議您像這樣保存資料：

[
{
 "projectName": "Project 1"
    "tickets": [
        "Ticket 1",
        "Ticket 2",
        "Ticket 3",
    ]
},
{
  "projectName": "Project 2"
    "tickets": [
        "Ticket 4"
        "Ticket 5"
        "Ticket 6"
    ]
}

]

uj5u.com熱心網友回復：

你有一個物件陣列。在此物件中，您只有一個屬性。該屬性是另一個字串陣列。

我不知道組件排版在做什么，并且將成為我的解決方案，對您的代碼和優化有好處。你可以嘗試這樣的事情：

渲染組件之前（不是 JSX）

let backEndValue = [
  {
    "Project 1": [
      "Ticket 1",
      "Ticket 2",
      "Ticket 3",
    ]
  },
  {
    "Project 2": [
      "Ticket 4",
      "Ticket 5",
      "Ticket 6",
    ]
  }
]
const [title,setTitle] = useState('');
const [subTitle,setSubTitle] = useState('');

setProjects = [];

Object.keys(backEndValue).map((prop) => {
  return setProjects.push(backEndValue[prop]);
})
setProjects.map((prop)=>{
  const temp = Object.keys(prop);
  const tempT = prop[temp];

  setTitle(temp);
  setSubTitle(tempT);
})

渲染中 (JSX)

{
title.map((prop,index)=>{
return <Typography key={index} variant="subtitle1" sx={{fontWeight: 'bold', ml: 2}} value={prop}>{prop}</Typography>
})
}
{
subTitle.map((prop,index)=>{
return <MenuItem key={index} sx={{ml: 3}} value={prop}>{prop}</MenuItem>
})
}

標籤：javascript 数组 反应 目的

上一篇：使用物件重命名R中的變數

下一篇：我想用django計算模板中的百分比