![](/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.