[英]Mapping over an array of objects to generate React components based on the key value pairs
EDIT: None of the solutions below worked for me as they were so after fiddling with ido ben ami's one I got this to work:编辑:下面的解决方案都不适合我,因为在摆弄了 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>
)
}
I had originally used fragments instead of Box but Material UI doesn't like that for Select. If I left out one of these two it didn't work because the 2 components being generated are not the same.我最初使用片段而不是 Box,但 Material UI 不喜欢 Select。如果我遗漏了这两个中的一个,它就不起作用,因为生成的 2 个组件不相同。
The data from my backend is as such (number of projects/tickets varies obviously):来自我后端的数据是这样的(项目/门票的数量明显不同):
[
{
"Project 1": [
"Ticket 1",
"Ticket 2",
"Ticket 3",
]
},
{
"Project 2": [
"Ticket 4"
"Ticket 5"
"Ticket 6"
]
}
]
I need to map over it to generate items for my Select component.我需要 map 来为我的 Select 组件生成项目。 This is the outcome I'm after but I can't figure out how to do it with Object.entries or Object.keys/Object.values:
这是我想要的结果,但我不知道如何使用 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>
try this尝试这个
<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>
but if you have access to make changes in the backend I will recommend to save the data like this:但如果您有权在后端进行更改,我建议您像这样保存数据:
[
{
"projectName": "Project 1"
"tickets": [
"Ticket 1",
"Ticket 2",
"Ticket 3",
]
},
{
"projectName": "Project 2"
"tickets": [
"Ticket 4"
"Ticket 5"
"Ticket 6"
]
}
] ]
You have an array of objects.你有一个对象数组。 In this objects you have only one properties.
在此对象中,您只有一个属性。 That properties is another array of string.
该属性是另一个字符串数组。
I do not know what is component Typography exatly doing and will be my solution good for your code and optimization but.我不知道组件 Typography 到底在做什么,但是我的解决方案对您的代码和优化很有用。 you can try somthing like this:
你可以尝试这样的事情:
Before rendering component (not JSX)在渲染组件之前(不是 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);
})
In rendering (JSX)在渲染中 (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>
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.