自动的“ for”和“ id”

Question

因为我们不能假设我们的组件是单例的：我试图自动处理将htmlFor赋予标签和字段。我们在下面看到我使用useMemo和破折号uniqueId来记住初始渲染时表单的唯一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>
        </>
    );
}