javascript - 类型错误：无法读取未定义的属性（读取 'includes'）在点击复选框时出现

带有实时项目预览的 CodeSandbox 代码链接

产品页面链接，其中包含复选框

我写了一段代码，当用户进入产品页面并点击一个名为“只显示寄售产品”的复选框时，它只显示产品名称中包含“CONSIGNMENT”一词的产品：

// Consignment Only
    if (filters.consignmentOnly &&
      !p.model.includes("CONSIGNMENT")) ||
      ...) {
        return false;
    }

当用户在此时这样做时，会出现以下 TypeScript 错误：

TypeError: Cannot read properties of undefined (reading 'includes')

看起来它显示model未定义（model指的是API数据中的模型值），但是我已经多次使用这个API的model和其他值，加载时一切正常。

我该如何解决这个问题？

答案＃1

p.model 未定义。尝试：

if (filters.consignmentOnly && (!!p.model && !p.model.includes("CONSIGNMENT"))

双感叹号让我们可以检查 p.model 的布尔值。

!!p.model 将返回真值或假值。如果为真值，p.model.includes 将被清除以继续。如果为假值，条件将在此处结束。

答案＃2

你可以尝试可选链：

// Consignment Only
if (filters.consignmentOnly && !p.model?.includes("CONSIGNMENT") || ...) {
    return false;
}