如何将 map 数据导入卡片 react.js

Question

我正在尝试在 react.js 中建立一个简单的商店。 我的下一步是将存储在 data.js 文件中的产品映射到单独的卡片中，然后是产品列表。 我正在为 Card 使用外部库。

这是 data.js（示例）：

 export const data = [
    {
      id: 1,
      title: "example title",
      content: "example content",
      image: "https://i.imgur.com/example.jpg"
    },
    {
      id: 2,
      title: "example title",
      content: "example content",
      image: "https://i.imgur.com/example.jpg"
    },
    {
      id: 3,
      title: "example title",
      content: "example content",
      image: "https://i.imgur.com/example.jpg"
    },
    ]

这将是一个呈现单个产品卡的组件：

import React from 'react';
import { Button } from 'react-bootstrap'
import { Card } from '@material-ui/core';
import Col from 'react-bootstrap/Col';
import { data } from '../../../data'


const Product = () => (


  <Col xs={12} md={6} lg={4} key={data.id}>
    <Card style={{ width: '18rem' }}>
      <Card.Header></Card.Header>
      <Card.Img variant="top" src={data.image} />
      <Card.Body>
        <Card.Title>{data.title}</Card.Title>
        <Card.Text>
          {data.content}
        </Card.Text>
        <Button variant="primary">Add to cart</Button>
        <Button>Add to favs</Button>
      </Card.Body>
    </Card>
  </Col>
)

export default Product;

最后，渲染许多产品的组件：

import React from 'react';

import Row from 'react-bootstrap/Row';
import {data} from '../../../data'

import Product  from '../Product/Product';

import styles from './Shop.module.scss';

const Shop = () => {

  return (
   
      <div className='row-wrapper'>
        <Row>
           {data.map(product => (
            <Product key={product.id} {...product} />
          ))}  
        </Row>
      </div>
    ) 
  
};

export default Shop;

这不起作用，我在控制台中收到错误。 我错过了什么？

编辑：我得到的错误：

警告：React.createElement：类型无效——需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：未定义。 您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

堆栈跟踪：

Blockquote 在 Product.js:13 检查您的代码。 in Product (at Shop.js:17) in div (由 Row 创建) in Row (at Shop.js:15) in div (at Shop.js:14) in Shop (由 Context.Consumer 创建) in Route (at Header.js:24) in Switch (at Header.js:22) in div (at Header.js:13) in Header (at MainLayout.js:15) in div (at MainLayout.js:13) in MainLayout (at App.js:12) 在路由器中（由 BrowserRouter 创建）在 BrowserRouter 中（在 App.js:11） 在 App 中（在 src/index.js:6）

Answer 1

您可以通过道具将产品详细信息从商店组件传递给产品组件，以下代码应该可以工作：

产品组件

import React from 'react';
import { Button } from 'react-bootstrap'
import { Card } from '@material-ui/core';
import Col from 'react-bootstrap/Col';


const Product = ({product}) => (


  <Col xs={12} md={6} lg={4} key={product.id}>
    <Card style={{ width: '18rem' }}>
      <Card.Header></Card.Header>
      <Card.Img variant="top" src={product.image} />
      <Card.Body>
        <Card.Title>{product.title}</Card.Title>
        <Card.Text>
          {product.content}
        </Card.Text>
        <Button variant="primary">Add to cart</Button>
        <Button>Add to favs</Button>
      </Card.Body>
    </Card>
  </Col>
)

export default Product;

车间组件

import React from 'react';

import Row from 'react-bootstrap/Row';
import {data} from '../../../data'

import Product  from '../Product/Product';

import styles from './Shop.module.scss';

const Shop = () => {

  return (
   
      <div className='row-wrapper'>
        <Row>
           {data.map(product => (
            <Product key={product.id} product={product} />
          ))}  
        </Row>
      </div>
    ) 
  
};

export default Shop;