Estoy viendo este ejemplo de una forma dinámica del diseño de hormigas y estoy luchando por descubrir exactamente qué está pasando:

 import { Form, Input, Button, Space } from 'antd'; import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'; const Demo = () => { const onFinish = values => { console.log('Received values of form:', values); }; return ( <Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off"> <Form.List name="users"> {(fields, { add, remove }) => ( // ### THIS LINE <> {fields.map(({ key, name, ...restField }) => ( <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline"> <Form.Item {...restField} name={[name, 'first']} rules={[{ required: true, message: 'Missing first name' }]} > <Input placeholder="First Name" /> </Form.Item> <Form.Item {...restField} name={[name, 'last']} rules={[{ required: true, message: 'Missing last name' }]} > <Input placeholder="Last Name" /> </Form.Item> <MinusCircleOutlined onClick={() => remove(name)} /> </Space> ))} <Form.Item> <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}> Add field </Button> </Form.Item> </> )} </Form.List> <Form.Item> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> ); }; ReactDOM.render(<Demo />, mountNode);

No puedo entender qué está haciendo {(fields, { add, remove }) => ( , sin embargo, fields , add y remove juegan roles críticos en la funcionalidad. Por ejemplo, llamar a "agregar" haciendo clic en el botón agrega un nuevo campo de entrada, y no está claro de inmediato por qué.

Lo que estoy tratando de resolver: me gustaría completar un formulario como este con mis propios datos dinámicos (de una llamada API) en la carga de la página, permitir que el usuario agregue y elimine filas (guardado en estado en cada cambio) , y hacer que todas esas filas estén vinculadas a alguna condición (por ejemplo, escupir un error si las filas no suman 100%)