javascript - 如何在 react 页面上正确显示带有对象(来自另一个文件)的数组？

Question

我有一个包含三种产品的数组，我想要将它们放在单独的 js 文件中:

export const products = [
                      {
                        product    : 'flash t-shirt',
                        price      :  27.50,
                        category   : 't-shirts',
                        bestSeller :  false,
                        image      : 'https://www.juniba.pk/wp-content/uploads/2018/02/the-flash-distressed-logo-t-shirt-black.png',
                        onSale     :  true
                      },
                      {
                        product    : 'batman t-shirt',
                        price      :  22.50,
                        category   : 't-shirts',
                        bestSeller :  true,
                        image      : 'https://s1.thcdn.com/productimg/1600/1600/11676326-1444552242012324.png',
                        onSale     :  false
                      },
                      {
                        product    : 'superman hat',
                        price      :  13.90,
                        category   : 'hats',
                        bestSeller :  true,
                        image      : 'https://banner2.kisspng.com/20180429/rqe/kisspng-baseball-cap-superman-logo-batman-hat-5ae5ef317f8366.9727520615250184175223.jpg',
                        onSale     :  false
                      }
   ]

然后我有一个 react 文件 - 当前包含以下代码:

import React from 'react';
import {products} from './Product';

const App = function() {

    const pagedata = products.map(function(item, index){
        <p key = {index}>item.product + item.price </p>
    })

    return (
        <div className="Product">
            <header>This is a header</header>
            <div>
                <h1>All Products</h1>
                    {pagedata}
                <h1>Bestsellers</h1>
                    {pagedata}
            </div>
            <footer>This is a footer</footer>
         </div>
     );
}

export default App;

我想显示产品，但它抛出一个错误:

Failed to compile ./src/App.js Line 7: Expected an assignment or function call and instead saw an expression no-unused-expressions

我错过了什么？

Answer 1

const pagedata = products.map(function(item, index){
    <p key = {index}>item.product + item.price </p>
})

这部分是错误的。 map 的回调函数应该返回它生成的元素

所以请尝试这样使用

const pagedata = products.map(function(item, index){
    return (
        <p key = {index}>{item.product + item.price} </p>
    )
})