react-final-form - 自动“for”和“id”

Question

因为我们不能假设我们的组件是单例的：我正在尝试自动处理给htmlFor标签和字段的处理。我们在下面看到我使用useMemolodashuniqueId来记忆初始渲染时表单的唯一 id。我必须将useMemo空数组作为第二个参数，所以它永远不会重新计算 id。有没有一些自动化的方法来处理这个final-form？

import React, { useMemo } from 'react';
import { Form, Field } from 'react-final-form';
import { uniqueId } from 'lodash';

function TaskForm() {

    const id = useMemo(() => uniqueId('_form'), []);
    const getFor = name => name + id;

    return (
        <>
            <h3>Create a task</h3>
            <Form onSubmit={onSubmit}>
                {({ handleSubmit, pristine, invalid, ...rest }) => {(
                    <form onSubmit={handleSubmit}>
                        <div className="form-group">
                            <label htmlFor={getFor('firstName')}>First Name</label>
                            <Field name="firstName" id={getFor('firstName')} component="input" placeholder="First Name" />
                        </div>

                        <button type="submit" disabled={pristine || invalid}>Submit</button>
                    </form>
                )}}
            </Form>
        </>
    );
}