Javascript 如何检查map（）中是否存在元素

我有工作代码

const products = this.state.products.map((product, i) => 
        product.fields.company.fields.slug === this.props.match.params.slug ?
        <Suspense key={i} fallback={<div>Loading...</div>}>
            <ProductListItem id={i} key={i} product={product} />
        </Suspense>
        : null)

        return(
            <div className="partner-details" style={partnerD}>
                <div className="container-xl">
                    <Button type="button" className="btn btn-secondary" onClick={this.props.history.goBack}>
                        <i className="fa fa-arrow-left"></i>&nbsp; Get back
                    </Button>
                    <ul>
                        <div className="product-item">
                            {products}
                        </div>
                    </ul>
                </div>
            </div>             
        )

但问题是如果product.fields.company.fields.slug company.fields.slug不存在，我的代码就会崩溃。 在执行此product.fields.company.fields.slug==this.props.match.params.slug之前，如何添加额外的三元运算符来检查it product.fields.company是否存在

谢谢

在第2行中，您可以执行以下操作： product&&product.fields&&product.fields.company&&product.fields.company.fields&&product.fields.company.fields.slug&&this.props&&this.props.match&&this.props.match.params&&this.props.match.params&&product.fields.company.fields.slug==this.props.match.params.slug

或者使用。

在第2行中，您可以执行以下操作： product&&product.fields&&product.fields.company&&product.fields.company.fields&&product.fields.company.fields.slug&&this.props&&this.props.match&&this.props.match.params&&this.props.match.params&&product.fields.company.fields.slug==this.props.match.params.slug

或者使用。

使用巴别塔插件

product.fields?.company?.fields?.slug

或利用：

并考虑包装你的复合物，这样你的应用程序在出现这种错误时不会崩溃。

<使用BabelPuxin < /P>

product.fields?.company?.fields?.slug

或利用：

---

并考虑包装你的复合物，这样你的应用程序在出现这种错误时不会崩溃。

< P>如果你的环境对你有支持，你可以这样做< /P>

product?.fields?.company?.fields?.slug === this.props.match.params.slug ?  .. : ..

否则，您需要检查每个字段是否真实

product && product.fields && product.fields.company && product.fields.company.fields && product.fields.company.fields.slug === this.props.match.params.slug ? .. : ..

---

如果您的环境支持，您可以这样做

product?.fields?.company?.fields?.slug === this.props.match.params.slug ?  .. : ..

否则，您需要检查每个字段是否真实

product && product.fields && product.fields.company && product.fields.company.fields && product.fields.company.fields.slug === this.props.match.params.slug ? .. : ..

---

您可以使用product.fields&&product.fields.company&&product.fields.company.fields&&product.fields.company.fields.slug==this.props.match.params.slug。。。但是你会有另一个问题，因为你没有对三元运算的结果做任何事情。有时候最好不要使用三元表达式-代码变得很难阅读。我建议只使用if语句或2来确保这一点，您可以使用filter函数this.state.products.filter…map。。。要删除没有特定字段的所有元素，可以使用product.fields&&product.fields.company&&product.fields.company.fields&&product.fields.company.fields.slug==this.props.match.params.slug。。。但是你会有另一个问题，因为你没有对三元运算的结果做任何事情。有时候最好不要使用三元表达式-代码变得很难阅读。我建议只使用if语句或2来确保这一点，您可以使用filter函数this.state.products.filter…map。。。要删除没有特定字段的所有元素，您有两个product.fields.company。谢谢，现在修复了它并添加了检查，但我认为，如果可能的话，可选链接更具可读性，更适合这样做。您有两个product.fields.company。谢谢，现在修复了它并添加了检查，尽管如此，我仍然认为，如果可能的话，可选链接是更具可读性和更可取的方式。