Как не отображать объект, у которого отсутствует дочернее значение

Question

Я отображаю некоторые данные в массиве.Длина массива равна 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 недели не должны отображаться как основное значение, которое приводит к отсутствию этого.

{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 ? ...

Answer 1

Вы можете просто использовать уменьшить .

внутри Reduce вы можете проверить наличие значения, если оно истинно, а не только добавить к окончательному выводу.

newdata.reduce((op,inp) => {
  if(inp) {
    op.push(inp)
  }
  return inp
},[])

Answer 2

Отображение массива все равно вернет удаление индекса из массива.

Использование фильтра будет работать в этом случае.

Вы должны использовать что-то вроде:

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

Надеюсь, это поможет,