[英]How to not map object that has a child value missing
I am mapping some data in array. 我在数组中映射一些数据。 The array length is 3 so I get 3 versions.
数组长度是3,所以我得到3个版本。 If a child value is
''
or undefined
I don't want it to map that object at all just the ones that have all values. 如果子值是
''
或undefined
我不希望它仅将具有所有值的对象映射到该对象。
const data = {
status4Weeks: "2",
status12Weeks: ""
};
status12weeks should be skipped as its empty. status12weeks应该被跳过为空。 I create a new array for my mapping adding in some other values.
我为映射创建了一个新数组,并添加了其他一些值。
const newdata = [
{
title: "4 Weeks",
statusWeek: data.status4Weeks,
color: status4WeeksColor,
numWeeks: 4
},
{
title: "12 Weeks",
statusWeek: data.status12Weeks,
color: status12WeeksColor,
numWeeks: 12
}
];
4 weeks should not be mapped as the essential value that drives this is missing. 不应将4周映射为导致缺失的基本值。
{newdata.map(v => (
<ListItem dense={this.props.dense} alignItems="flex-start">
<ListItemText
primary={
<React.Fragment>
Predicted score - <strong>{v.title}</strong>
</React.Fragment>
}
secondary={
<React.Fragment>
<Typography component="span" color="textPrimary">
Predicted date{" "}
<i
style={{ "font-size": "1em" }}
className="zmdi zmdi-calendar mx-2"
/>{" "}
{moment(data.vulnerabilityDate)
.add(v.numWeeks, "weeks")
.format("MMM DD, YYYY")}
</Typography>
</React.Fragment>
}
/>
<ListItemSecondaryAction>
<span
style={{
"font-size": "1rem",
"background-color": v.color,
"min-width": "45px"
}}
className="vulnerability badge badge-primary"
>
{v.statusWeek}
</span>
</ListItemSecondaryAction>
</ListItem>
))}
Here is a codesandbox - https://codesandbox.io/s/wq72p92295 这是一个codeandbox- https ://codesandbox.io/s/wq72p92295
I've tried using a ternary operator, inside my mapping : 我尝试在映射中使用三元运算符:
{v.status.Week !== '' || undefined ? ...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.