props.mutators устарела

Question

Мой код работает, но я получил предупреждение:

Предупреждение: Начиная с финальной формы React v3.3.0, props.mutators устарел и будет удален в следующей основной версии ReactОкончательная форма.Вместо этого используйте: props.form.mutators.Проверьте свой объект рендеринга ReactFinalForm.

с этим примером:

https://codesandbox.io/s/kx8qv67nk5

<code>   return   <Form
            onSubmit={() => console.log('ok')}
            mutators={{
                ...arrayMutators
            }}
            initialValues={ {customers: [{firstName: 'a', lastName: 'b'}]} }
            render={({
                         handleSubmit,
                         mutators: { push, pop }, // injected from final-form-arrays above
                         pristine,
                         reset,
                         submitting,
                         values
                     }) => {
                return (
                    <form onSubmit={handleSubmit}>
                        <div className="buttons">
                            <button
                                type="button"
                                onClick={() => push('customers', undefined)}>
                                Add Customer
                            </button>
                        </div>
                        <FieldArray name="customers">
                            {({ fields }) =>
                                fields.map((name, index) => (
                                    <div key={name}>
                                        <label>Cust. #{index + 1}</label>
                                        <Field
                                            name={`${name}.firstName`}
                                            component="input"
                                            placeholder="First Name"
                                        />
                                        <Field
                                            name={`${name}.lastName`}
                                            component="input"
                                            placeholder="Last Name"
                                        />
                                        <GithubField name="user1" onSearch={(item) => {
                                            this.api.getByFirstname(item).then(result => console.log(result));
                                        }} />
                                        <span
                                            onClick={() => fields.remove(index)}
                                            style={{ cursor: 'pointer' }}>❌</span>
                                    </div>
                                ))}
                        </FieldArray>

                        <div className="buttons">
                            <button type="submit" disabled={submitting || pristine}>
                                Submit
                            </button>
                            <button
                                type="button"
                                onClick={reset}
                                disabled={submitting || pristine}>
                                Reset
                            </button>
                        </div>
                        <pre>{JSON.stringify(values, 0, 2)}

)}} />

Как правильно поступить?

Answer 1

Предупреждение уже говорит вам, что делать.

Вы должны использовать form.mutators вместо просто mutators.

Для этого вы можете изменить свой код с mutators: { push, pop }до form: { mutators: { push, pop } }