如何通过数组/对象在产品列表中显示产品项目

问题描述

我必须从product Item获取产品的所有列表，该位置是我从Firebase显示每个产品Item的地方，这是我的代码

import React,{ useState,useEffect } from 'react';
import { Card } from 'react-bootstrap';
import Button from '../Button/index';
import { DB } from '../../firebase/Firebase';
import "./index.css";


const ProductItem = ({ image,name,price }) => {
  var [productObjects,setProductObjects] = useState({});

  useEffect(() => {
    DB.ref().child('products').on('value',(snapshot) => {
      if (snapshot.val() != null) {
        setProductObjects({
          ...snapshot.val(),});
      }
    });
  },[]);
  return (
    <div className="product-item">
      {Object.keys(productObjects).map((key) => (
        <Card style={{ width: '18rem' }} key={key}>
          <Card.Img variant="top" src={productObjects[key].image} />
          <Card.Body>
            <Card.Title>{productObjects[key].name}</Card.Title>
            <Card.Text>
              {productObjects[key].price}
            </Card.Text>
            <Button
              onClick={() => { console.log("Add to card!") }}
              type="button"
              variant="success-outline"
              size="lg"
            >
              Add to card
            </Button>
          </Card.Body>
        </Card>
      ))}
    </div>

  );
}

export default ProductItem;

这是我要显示所有产品列表的地方

import ProductItem from '../../components/ProductItem/index'

class ProductsPage extends Component {

const ProductItemList = [ProductItem]

const ShowProductItemList = ProductItemList.map((product,index) => {
    product.ProductItem
  })

  render() {
    return (
      <div className="products-container">
         {ShowProductItemList }
      </div>
    );
  }
}

我想在此页面中显示每个产品项目，但是我该怎么做

它已与现有项目中的所有其他项目合并。

我知道那不对，但是我不知道该怎么做。我要显示此页面的每个项目。谁能帮我！感谢您抽出宝贵的时间，非常感谢

您可以检查此链接here

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）