如何修复此警告 Array.prototype.map() 需要来自箭头函数 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;

我还有其他反应组件

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 => (
         <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 2

Map

函数返回一个数组，其中包含对每个数组元素调用函数的结果，这意味着函数需要返回映射的元素。

在您的情况下，您可以明确指示返回语句，如下所示：

{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 3

要使用箭头函数返回值，您有 2 个选项：

1. () => '值'
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>)
                )}

Answer 4

从地图箭头函数返回值

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