如何在reactjs中返回数组的第一个对象[重复]答案

【问题标题】：How to return the first object of array in reactjs [duplicate]如何在reactjs中返回数组的第一个对象[重复]
【发布时间】：2020-10-02 12:36:07
【问题描述】：

我正在尝试返回数组的第一个对象，我该如何实现。

{ products && products.map((product,i)=>(
       <div key={i} >
          <h6>{product.name} - {product.category.name}</h6>
          <p className="mb-0"> {product.price} returns in {product.duration} months</p>
       </div>
   ))
 }

【问题讨论】：

不要使用products（数组），将变量product设置为products[0]并使用它。
如Heretic Monkey所说，先获取商品item let product = Array.isArray(products) && products.length > 0 && products[0]，避免这样获取props products[0] .name...

标签： reactjs react-hooks

【解决方案1】：

如果您对映射整个数组不感兴趣，只获取第一项，则可以使用 index 代替：

{ products && products[0] && (
       <div>
          <h6>{products[0].name} - {products[0].category.name}</h6>
          <p className="mb-0"> {products[0].price} returns in {products[0].duration} months</p>
       </div>)
   ))
 }

注意：顺便说一句，[] 在 JS 中被认为是真值，所以你应该使用 !!products.length 而不是 products

【讨论】：