如何将数据映射到卡片 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：类型无效 - 应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

堆栈跟踪：

块引用 在 Product.js:13 检查您的代码。 在产品中（在 Shop.js:17） 在 div 中（由 Row 创建） 在行中（在 Shop.js:15） 在 div 中（在 Shop.js:14） 在商店（由 Context.Consumer 创建） 在路线中（在 Header.js:24） 在 Switch 中（在 Header.js:22 处） 在 div 中（在 Header.js:13 处） 在页眉中（在 MainLayout.js:15） 在 div 中（在 MainLayout.js:13） 在 MainLayout (在 App.js:12) 在路由器中（由 BrowserRouter 创建） 在 BrowserRouter (在 App.js:11) 在应用程序中（在 src/index.js:6）

Answer 1

您可以通过 props 将 shop 组件中的产品详细信息传递给 Product 组件，以下代码应该可以工作：

产品组件

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;