props.mutators已被弃用。

Question

我的代码可以工作，但是我收到了一个警告：

警告：从React Final Form v3.3.0开始，props.mutators已被弃用，并将在下一个主要版本的React Final Form中删除。请改用：props.form.mutators。检查您的ReactFinalForm渲染属性。

使用以下示例：

https://codesandbox.io/s/kx8qv67nk5

   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)}</pre>
                    </form>
                )
            }}
        />

如何正确地做？

- Xero

Answer 1

警告已经告诉你该怎么做了。

你必须使用form.mutators而不是仅仅使用mutators

为了这样做，你可以更改你的代码从

mutators: { push, pop }

to

form: { mutators: { push, pop  } }

- Guilherme Santiago

---

不幸的是，这不起作用。因为我必须使用“arrayMutators”。请看第4行。 - Xero

应该可以工作，因为我也使用数组变异器。你能把你的代码粘贴一下吗？ - Guilherme Santiago

哦，抱歉。不是“forms”，而是单数的“form”。 - Guilherme Santiago