Javascript 如何在Form.Item中迭代添加Form.Item在ant设计表单中

forEach

用于按程序循环数组。它不用于构建表达式。React元素表达式是要从渲染函数返回的内容

forEach

返回

undefined

users: 

[{
companyID: 2
companyName: "TEST1"
},{
companyID: 7
companyName: "TEST2"
}]

products:

[{
companyId: 2,
id: 1,
type:"PEN",
priceId:2,
productName: "TESTProduct1"
},{
companyId: 7,
productName: "TESTProduct2",
type:"PENCIL",
priceId:3,
id: 2
},{
companyId: 7,
id: 3,
type:"ERASER",
priceId:4,
productName: "TESTProduct3"
},{
companyId: 7,
id: 4,
type:"SHARPNER",
priceId:5,
productName: "TESTProduct4"
}]

{selectedProducts.flatMap（productId=>products
.filter（product=>product.id==productId）
.map（产品=>(
{console.log（“Inside form.item”）}
))
)}

使用

map

而不是

forEach

：非常感谢@Jacob。你让我开心！如果你在多伦多或将来要来，我想给你拿杯咖啡。

users: 

[{
companyID: 2
companyName: "TEST1"
},{
companyID: 7
companyName: "TEST2"
}]

products:

[{
companyId: 2,
id: 1,
type:"PEN",
priceId:2,
productName: "TESTProduct1"
},{
companyId: 7,
productName: "TESTProduct2",
type:"PENCIL",
priceId:3,
id: 2
},{
companyId: 7,
id: 3,
type:"ERASER",
priceId:4,
productName: "TESTProduct3"
},{
companyId: 7,
id: 4,
type:"SHARPNER",
priceId:5,
productName: "TESTProduct4"
}]

<Form.Item
  label="Price Map"
  name="priceMap"
  rules={[{ required: true, message: "Please input Prices!" }]}
>
  {selectedProducts.flatMap(productId => products
    .filter(product => product.id === productId)
    .map(product => (
      <Form.Item
        label={product.type}
        name={product.priceId}
        style={{ width: "50%" }}
        rules={[
          { required: true, message: "Please input price!" }
        ]}
        initialValue={product.price}
      >
        {console.log("Inside form.item")}
        <Input />
      </Form.Item>
    ))
  )}
</Form.Item>