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

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语句

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

 {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

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

（）=>'值'
（）=> {return'value'}

在您的情况下，您添加了一个额外的荣誉，因此您需要使用关键字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>
)
                })}

如何解决此警告警告Array.prototype.map（）期望从箭头函数array-callback-return返回值？

4 个答案: