如何修复此警告 warning Array.prototype.map() expects a return value from arrow function array-callback-return?

Question

我真正的问题是：我在这个文件中有 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;

我还有其他 React 组件 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

谢谢大家的帮助。

Answer 1

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>
)
                })}

Answer 2

当您在箭头函数中使用 {} 时，它会创建一个需要显式 return 语句的代码块

只需将 {} 更改为 ()，就会出现隐含的 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)

Answer 3

Map 函数 return 是一个数组，其中包含为每个数组元素调用函数的结果，这意味着函数需要 return 映射元素。

在您的情况下，您可以明确指出 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>
                ))}

Answer 4

要return一个带有箭头函数的值，你有两个选择：

() => 'value'
() => { return 'value' }

在您的情况下，您添加了额外的荣誉，因此您需要使用关键字 return 指定 returned 值。但是，我确实建议直接 returning 值：

  {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>)
                )}

如何修复此警告 warning 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?

javascript

reactjs

arrow-functions