Question

如果reportDate.parent存在，我当前正在使用三元运算符返回true。问题是它返回true，但是对于某些返回的数组，没有value属性，因此报表中断。

{
        reportData.parent && (
            <React.Fragment>
                <Report/>
            </React.Fragment>
        )
    }

以下内容中断：

parent: Array(3)
0: {dateTime: "05/09/2018"}
1: {dateTime: "16/06/2018"}
2: {dateTime: "19/03/2018"}
length: 3

以下内容有效，因为它至少具有1个值：

parent: Array(3)
0: {dateTime: "05/09/2018", value: 2}
1: {dateTime: "16/06/2018"}
2: {dateTime: "19/03/2018"}
length: 3

我需要在返回报告组件之前在此顶层进行检查，例如：

{
    reportData.parent.value === undefined && (
        <React.Fragment>
            <Report />
        </React.Fragment>
    )
}

我还是可以在这里使用三元运算符或其他条件渲染方法？

重申一下，我希望报表仅在数组中至少有一个值时才返回。

更新：我只是在查看键（命名值）是否存在（不仅仅是在数组内部是否存在值）

Answer 1

重申一下，我希望报告仅在至少有一个报告时才返回值。

您可以尝试以下方法：

{
    reportData.parent.length > 0 && (
        <React.Fragment>
            <Report />
        </React.Fragment>
    )
}

已更新

根据您的评论，我提出了此解决方案

let parent1 = [
  {
    dateTime: "05/09/2018",
    value: 2
  },
  {
    dateTime: "16/06/2018"
  },
  {
    dateTime: "19/03/2018"
  }
];
let parent2 = [
  {
    dateTime: "05/09/2018"
  },
  {
    dateTime: "16/06/2018"
  },
  {
    dateTime: "19/03/2018"
  }
];

var hasValue = function(element) {
  return element.hasOwnProperty('value')
};

console.log(parent1.some(hasValue)); // true
console.log(parent2.some(hasValue)); // false

然后...

{
    reportData.parent.length > 0 && reportData.parent.some(hasValue) && (
        <React.Fragment>
            <Report />
        </React.Fragment>
    )
}

希望它能按预期工作

Answer 2

如果value始终是数字，则可以使用some

reportData.parent.some(a => !!a.value)

Answer 3

您可以只检查真实值

{
    reportData.parent.value && (
        <React.Fragment>
            <Report />
        </React.Fragment>
    )
}

使用三元运算符检查数组中的键是否存在

3 个答案:

已更新