react 循环数组，以及二维数组

<Form.List

name="lxrs"

initialValue={[

{

djbmId: null,

lxrMc: '',

lxdh: '',

},

]}

rules={[

{

validator: (_, value: string[]) => {

if (value && value.length > 0) {

return Promise.resolve()

}

return Promise.reject(new Error('请至少填写一个爱好'))

},

},

]}

>

{(fields, { add, remove }) => {

// console.log(fields)

return (

<div>

{fields.map(field => (

<Row key={field.key}>

<Col span={6}>

<Form.Item

{...field}

name={[field.name, 'djbmId']}

label="对接部门"

rules={[{ required: true, message: '请选择对接部门' }]}

>

<TreeSelect

showSearch

style={{ width: '100%' }}

dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}

placeholder="请选择对接部门"

allowClear

onChange={() => {}}

treeData={djbTree}

/>

</Form.Item>

{/* <ProFormTreeSelect

{...field}

name={[field.name, 'djbmId']}

label="对接部门"

treeData={djbTree}

placeholder="请选择对接部门"

rules={[{ required: true, message: '请选择对接部门' }]}

style={{ width: '300' }}

treeCheckable

/> */}

</Col>

<Col span={5} offset={1}>

<ProFormText

name={[field.name, 'lxrMc']}

label="联系人"

placeholder="请输入承运商名称"

rules={[

{ required: true, message: '请输入承运商名称' },

]}

/>

</Col>

<Col span={5} offset={1}>

<ProFormText

name={[field.name, 'lxdh']}

label="联系电话"

placeholder="请输入联系电话"

rules={[{ required: true, message: '请输入联系电话' }]}

/>

</Col>

<Col span={5} offset={1}>

<Button type="link" onClick={() => add()}>

新增

</Button>

<Button

type="link"

onClick={() => {

console.log(fields, 'fields')

if (fields.length <= 1) {

return

}

remove(field.name)

}}

>

删除

</Button>

</Col>

</Row>

))}

</div>

)

}}

</Form.List>

将需要循环的部分使用Form.list进行包裹，使用{(fields, { add, remove }) => { 包裹循环体，使用field.map循环每一个需要动态增删的部分，新增跟删除按钮处的写法为固定写法