javascript - 如何不映射缺少子值的对象

标签 javascript reactjs mapping

我正在映射数组中的一些数据。数组长度为 3,所以我得到 3 个版本。如果子值是 ''undefined,我根本不希望它只映射具有所有值的对象。

const data = {
  status4Weeks: "2",
  status12Weeks: ""
}; 

status12weeks 应该被跳过,因为它是空的。我为我的映射创建一个新数组,添加一些其他值。

const newdata = [
      {
        title: "4 Weeks",
        statusWeek: data.status4Weeks,
        color: status4WeeksColor,
        numWeeks: 4
      },
      {
        title: "12 Weeks",
        statusWeek: data.status12Weeks,
        color: status12WeeksColor,
        numWeeks: 12
      }
    ];

4 周不应被映射为驱动这一点的基本值(value)缺失。

{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>
          ))}

这是一个代码沙箱 - https://codesandbox.io/s/wq72p92295

我尝试在我的映射中使用三元运算符:

{v.status.Week !== '' || undefined ? ...

最佳答案

映射数组仍将返回从数组中删除索引。

使用filter在这种情况下会起作用。

你应该使用类似的东西:

array.filter(e=> (e!==undefined && e.length>0)).map(e=> /*your map stuff*/)

希望这有帮助,

关于javascript - 如何不映射缺少子值的对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54890068/

相关文章:

javascript - jQuery AJAX - 在单个请求中将文件和变量发送到 PHP

javascript - NextJS 使用外部服务器进行身份验证

javascript - 两张照片放在一起。在悬停时显示一个。可以用 css 还是只用 javascript?

javascript - 根据reactJS中的props使用动态键初始化状态

javascript - 从 fetch 中传递 Props

javascript - 从 api 调用映射时检索嵌套 JSON 对象

javascript - 使用 Controller 方法选择 Angular 选项卡

reactjs - 如何更改 Material UI 选项卡按钮的宽度

orm - 在 cli-config.php 中调用 GetEntityManager() 中的未定义函数

ios - 休息套件 : mapping with nested object with no id (dupplicated)