如何解决这个警告警告 Array.prototype.map() 期望从箭头函数数组回调返回的返回值？

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

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

Answer 2

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

只需更改{}to()就会发生隐式返回

 {Products.map(product => (
         <li>....</li>
 ))}

基本示例：

 {Products.map(product => (
         <li>....</li>
 ))}