使用antd的Form表单组件，数组中嵌套数组,不使用Form.List,使用name实现快速匹配和提取数据

在后台项目开发中，Form表单几乎是占主要部分，数组嵌套数组或者更深，都可以方便获取

需求描述

我描述一个简单的例子，假设现在我们需要给一款水杯，录入价格信息
水杯分款式，在不同款式中不同日期他的价格和库存是不一样的，需要录入
页面图如下：

当我点击确定是，就可以直接获取到所有信息，并且也是提交数据时所需的结构

---

二、代码参考

import React, { useState, useEffect} from "react";
import { Form, Input, Button, Space, DatePicker  } from "antd";
const { RangePicker } = DatePicker;

export const Example = () => {
  const [productPrices, setProductPrices] = useState([{type: '', prices:[{data: '', amount: '', stock: ''}]}]);
  const [form] = Form.useForm();

  useEffect(() => {
    if(productPrices.length > 0) {
      // 设置表单数据
      form.setFieldsValue({
        productPrices
      });
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // 提交数据
  function submit(formData) {
    const postData = {...formData};

   console.log('postData', postData);
  }

  return (

    <Form
      onFinish={submit}
      form={form}
      validateTrigger="onBlur"
      preserve={false}
      autoComplete="off"
      >
        <h2>xxxx运动型水杯</h2>
        <div className="date-period-template">
            {productPrices.map((data, parsentIndex) => {
              return (
               <div className="mt-16" key={parsentIndex}>
                  <Space style={{border: '1px solid #e5e5e5', padding: '8px'}}>
                    <div>
                      <Form.Item label="款式" name={['productPrices', parsentIndex, 'type']}>
                        <Input placeholder="" />
                      </Form.Item>
                      {data.prices.map((_, index) =>
                        <div key={`${parsentIndex}-${index}`} className="mb-8 flex-row" >
                          <Form.Item label="价格" name={['productPrices', parsentIndex, 'prices', index, 'date']}>
                            <RangePicker />
                          </Form.Item>

                          <Form.Item label="价格" name={['productPrices', parsentIndex, 'prices', index, 'amount']}>
                            <Input placeholder="价格" />
                          </Form.Item>

                          <Form.Item label="库存"  name={['productPrices', parsentIndex, 'prices', index, 'stock']}>
                            <Input placeholder="库存" />
                          </Form.Item>
                        </div>
                      )}
                    </div>

                    <Button  onClick={() => {
                      productPrices[parsentIndex].prices = [...productPrices[parsentIndex].prices, {date: '', amount: '', stock: ''}];
                      setProductPrices([...productPrices])
                    }}>
                      + 添加
                    </Button>
                  </Space>
               </div>
              )}
            )}

          </div>
          <Button className="mt-8" onClick={() =>  setProductPrices([...productPrices, {type: '', prices:[{data: '', amount: '', stock: ''}]}])}>
            + 添加
          </Button>
          <div><Button className="mt-8" size="large"  type="primary" htmlType="submit">确定</Button></div>
    </Form>
  )

};


export default Example;

总结

设置正确的 name很重要，层级结构一定要设置正确：如name={[‘productPrices’, parsentIndex, ‘prices’, index, ‘amount’]}

数据示例：
productPrices =[{type: ‘’, prices:[{data: ‘’, amount: ‘’, stock: ‘’}]}]