Reactjs 内部带有数组值的打印卡

我一直在尝试打印卡片内部数组的值，但出于某种原因，for循环不允许我打印卡片

import React, { Component } from 'react';
import * as bs from 'react-bootstrap'
import '@fortawesome/fontawesome-free/css/all.css'
import PRODUCTS from './products'
import ProductCard from './product-card'


function Center(props){


const product = Object.values(PRODUCTS)
product.map((product) => return(
   <bs.Container fluid ClassName = "p-0">

     <bs.Row noGutters style = {{padding: "6rem 0" }}>
            <bs.Col>


                for(var i= -; i< product.length; i++){

                   <ProductCard>


                  </ProductCard>
                }

          </bs.Col>


       </bs.Row>

     </bs.Container>

    )

    )


}

export default Center;

import React，{Component}来自'React'；
从“react bootstrap”导入*作为bs
导入“@fortawesome/fontawesome free/css/all.css”
从“./PRODUCTS”导入产品
从“./产品卡”导入产品卡
功能中心（道具）{
常量产品=对象值（产品）
product.map（（产品）=>返回(
对于（var i=-；i

这是卡片代码：

import React from 'react';
import * as bs from 'react-bootstrap';
import { BrowserRouter  as Router , Route, Switch} from "react-router-dom";

function ProductCard(props) {

    return (


    <Card style={{ width: '18rem' }}>
    <Card.Img variant="top" src="holder.js/100px180" />
    <Card.Body>
      <Card.Title>Card Title</Card.Title>
      <Card.Text>

      </Card.Text>
      <Button variant="primary">Go somewhere</Button>
    </Card.Body>
    </Card>
  )

}

export default ProductCard;

从“React”导入React；
从“react bootstrap”导入*作为bs；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
功能产品卡（道具）{
返回(
卡片标题
去某处
)
}
导出默认产品卡；

您的代码有几个问题-

1） 您没有返回通过

产品

进行迭代的结果

2） 您没有在JSX元素中正确嵌套JavaScript表达式

这就是它应该被修复的方式：

function Center(props){
  const products = Object.values(PRODUCTS);

  return <>
    {
      products.map((product) => (
        <bs.Container fluid ClassName = "p-0">
          <bs.Row noGutters style = {{padding: "6rem 0" }}>
            <bs.Col>
            {
              product.map(() => <ProductCard />)
            }           
            </bs.Col>
          </bs.Row>
        </bs.Container>
      ))
   }
  </>
}

功能中心（道具）{
常量产品=对象值（产品）；
回来
{
products.map（（产品）=>(
{
product.map（（）=>）
}           
))
}
}

第一个问题是需要在JSX中用大括号（

{}

）包装JS表达式。其次，虽然for循环将运行，但它不会产生您想要的结果。要迭代数组，请使用

map（）

，就像您在代码开头所做的那样。在@Chris提到的其他事情中，您的

Center

功能组件没有返回任何内容。我假设它应该返回由product.map语句创建的数组？您是否有

product

或

PRODUCTS

的示例？您的答案通常是正确的，但您的答案代码中有几个错误：PRODUCTS.map语句需要用大括号括起来，而

return

关键字应该从map函数中return表达式的开头删除，因为它需要的是表达式，而不是return语句。除非您将return语句也用花括号括起来。另外，React将不喜欢返回的jsx中的for循环。应该用另一个array.map替换，但它取决于

产品的数据类型。您还可以将for循环移到
Center
函数组件的return语句之外。@AndrewFink啊，是的，我真粗心。谢谢我应该在复制和粘贴问题之前仔细阅读。是的，我正在等待OP发布产品外观的示例，然后再编辑它以使用
Array.map（）
。