![](/img/trans.png)
[英]Array.prototype.map() expects a return value from arrow function array-callback-return
[英]How fix this warrning warning Array.prototype.map() expects a return value from arrow function array-callback-return?
我真正的問題是:我在這個文件中有data.js
文件,我創建了一個像這樣的靜態數組:
const products =
[
{
_id:1,
name: 'Slim Shirt',
category:'Shirt',
image:'/images/d1.jpg',
price: 60,
rating: 4.5,
numReviews:10
},
{
_id:2,
name: 'First Shirt',
category:'Shirt',
image:'/images/d1.jpg',
price: 50,
rating: 4.5,
numReviews:10
},
{
_id:3,
name: 'Best Pant',
category:'Shirt',
image:'/images/d1.jpg',
price: 60,
rating: 4,
numReviews:5
},
{
_id:4,
name: 'Slim Shirt',
category:'Shirt',
image:'/images/d1.jpg',
price: 60,
rating: 4.2,
numReviews:7
},
{
_id:5,
name: 'Slim Shirt',
category:'Shirt',
image:'/images/d1.jpg',
price: 60,
rating: 4.5,
numReviews:10
},
{
_id:6,
name: 'Slim Pant',
category:'Shirt',
image:'/images/d1.jpg',
price: 60,
rating: 4.5,
numReviews:10
},
{
_id:7,
name: 'Slim Shirt',
category:'Shirt',
image:'/images/d1.jpg',
price: 60,
rating: 4.5,
numReviews:10
},
{
_id:8,
name: 'Slim Shirt',
category:'Pant',
image:'/images/d1.jpg',
price: 60,
rating: 4.5,
numReviews:10
},
];
export default products;
我還有其他反應組件HomeScreen.js
,我導入我的數組並像這樣使用它,
import React from 'react';
import { Link } from 'react-router-dom';
import Products from './../data';
function HomeScreen(props){
console.log(Products)
return (<ul className="products">
{Products.map(product =>{
<li>
<div className="product">
<img className="product-image" src={product.image} alt="product"/>
<div className="product-name">
<Link to={'/product' + product._id}>{product.name}</Link>
</div>
<div className="product-brand">{product.brand}</div>
<div className="product-price">{product.price}</div>
<div className="product-rating">{product.rating}</div>
</div>
</li>
})}
</ul>)
}
export default HomeScreen;
但是,我風格有這個警告
warning Array.prototype.map() expects a return value from arrow function array-callback-return
感謝幫助我的人。
Map
函數返回一個數組,其中包含對每個數組元素調用函數的結果,這意味着函數需要返回映射元素。
在您的情況下,您可以明確指出一個 return 語句:
{Products.map(product =>{
return (
<li>
<div className="product">
<img className="product-image" src={product.image} alt="product"/>
<div className="product-name">
<Link to={'/product' + product._id}>{product.name}</Link>
</div>
<div className="product-brand">{product.brand}</div>
<div className="product-price">{product.price}</div>
<div className="product-rating">{product.rating}</div>
</div>
</li>
)
})}
或者你可以隱式地這樣做:
{Products.map(product => ( // Note that we're using parenthesis here rather than braces
<li>
<div className="product">
<img className="product-image" src={product.image} alt="product"/>
<div className="product-name">
<Link to={'/product' + product._id}>{product.name}</Link>
</div>
<div className="product-brand">{product.brand}</div>
<div className="product-price">{product.price}</div>
<div className="product-rating">{product.rating}</div>
</div>
</li>
))}
當您在箭頭函數中使用{}
,它會創建一個需要顯式return
語句的代碼塊
只需將{}
更改為()
就會發生隱式返回
{Products.map(product => (
<li>....</li>
))}
基本示例:
const arr = [1,2,3]; let res = arr.map(n => { return n*2}) console.log('explicit return', res) res = arr.map(n => (n*2)) console.log('implicit return', res)
要使用箭頭函數返回值,您有 2 個選項:
在您的情況下,您添加了額外的榮譽,因此您需要使用關鍵字 return 指定返回值。 但是,我確實建議直接返回值:
{Products.map(product => (<li>
<div className="product">
<img className="product-image" src={product.image} alt="product"/>
<div className="product-name">
<Link to={'/product' + product._id}>{product.name}</Link>
</div>
<div className="product-brand">{product.brand}</div>
<div className="product-price">{product.price}</div>
<div className="product-rating">{product.rating}</div>
</div>
</li>)
)}
從地圖箭頭函數返回值
{Products.map(product =>{
return (
<li>
<div className="product">
<img className="product-image" src={product.image} alt="product"/>
<div className="product-name">
<Link to={'/product' + product._id}>{product.name}</Link>
</div>
<div className="product-brand">{product.brand}</div>
<div className="product-price">{product.price}</div>
<div className="product-rating">{product.rating}</div>
</div>
</li>
)
})}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.