如何在ant design Form的Form.Item中迭代添加Form.Item

Question

     const [selectedCompanyId, setSelectedCompanyId] = useState(undefined);
     const [selectedProducts, setSelectedProducts] = useState([]);

      const { Option } = Select;
      const [form] = Form.useForm();
      const handleFormValuesChange = changedValues => {
        const formFieldName = Object.keys(changedValues)[0];
        if (formFieldName === "companyId") {
          setSelectedCompanyId(changedValues[formFieldName]);
          setSelectedProducts([]);
          form.setFieldsValue({ products: undefined }); //reset product selection
        }
        if (formFieldName === "products") {
          setSelectedProducts(changedValues[formFieldName]);
        }
      };

        <Form
            layout="vertical"
            size="medium"
            form={form}
            className="teste-form"
            requiredMark={false}
            onFinish={onFinish}
            onValuesChange={handleFormValuesChange}
          >
            <Form.Item
                  label="Company/Customer"
                  rules={[
                    { required: true, message: "Please select Company!" }
                  ]}
                  name="companyId"
                >
                  <Select style={{ width: "50%" }} name="companyId">
                    {users.map((user, index) => {
                      return (
                        <Option key={index} value={user.companyID}>
                          {user.companyName}
                        </Option>
                      );
                    })}
                  </Select>
                </Form.Item>
   <Form.Item
                  label="Products"
                  name="products"
                  rules={[
                    { required: true, message: "Please select Products!" }
                  ]}
                >
                  <Select mode="multiple" allowClear style={{ width: "70%" }}>
                    {products
                      .filter(
                        product => product.companyId === selectedCompanyId
                      )
                      .map(product => (
                        <Option key={product.id} value={product.id}>
                          {product.productName}
                        </Option>
                      ))}
                  </Select>
                </Form.Item>
           <Form.Item
                  label="Price Map"
                  name="priceMap"
                  rules={[{ required: true, message: "Please input Prices!" }]}
                >
                  {selectedProducts.forEach(productId => {
                    products.forEach(product => {
                      if (product.id === productId) {
                        return (
                          <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>
          </Form>

我正在尝试根据产品onChange 选择来实现在价格图元素更改中动态添加<Form.Item>。

我已经指定了<Form.Item label="Products" name="products">，并且在其中我正在检查条件并迭代地添加<Form.Item>。

通过检查<Form.Item label="Products" name="products"> </Form.Item> 中的console.log() 条件正在变为真，但UI 没有显示迭代添加的<Form.Item>。

我对蚂蚁设计真的很陌生，无法弄清楚如何动态添加Form.Item。

在这里，用户和产品是json，如下所示。

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"
}]

Answer 1

forEach 用于按程序循环遍历数组。它不用于构建表达式。 React 元素 表达式 是您希望从渲染函数返回的内容。 forEach 返回undefined。

<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>