reactjs - 以 react-final-form 循环遍历记录数组

Question

我在一个组件中有一个表单，它将有一些记录可以循环浏览。记录被调用并存储在 componentdidMount 上的 redux 存储中。我无法“循环”浏览表格上的记录。我可以很容易地设置初始值，但是当用户单击下一步以使用集合中下一条记录（数据 [x]）中的数据重新初始化 react-final-form 时，最好的方法是什么？

    export type IFormDataStatProps = {
    data: Array<FormData>;
}

export interface IFormDataDispatchProps {
    getData: () => void;
}

type IFormDataPageProps = IFormDataStatProps & IFormDataDispatchProps;

class FormPage extends React.Component<IFormDataPageProps> {

    constructor(props: IFormDataPageProps) {
        super(props);
    }

    public componenetDidMount() {
        this.props.getData();
    }

    onSubmit = (values) => {
        window.alerty(JSON.stringify(values, undefined, 2));
    }

    nextRecord = () => {
        //something here to reinitialize the form with data from next array position (data[1]).  There might be something built into react-final-form to do this.
    }

    public render() {
        return (
            <Form
                onSubmit={this.onSubmit}
                initialVaues={{
                    firstName: data[0].firstName,
                    lastName: data[0].lastName
                }}
                render={({ handleSubmit, form, submitting, pristine, values}) => (
                    <Field
                        name="firstName"
                        component="input"
                    />

                    <Field
                        name="lastName"
                        component="input"
                    />

                    <button type="submit">Save</button>
                    <button onClick={this.nextRecord}>Next</button>
                )}
        )
    }
}