Ant-design: You cannot set field before registering it when set the value to dynamic form item

Hello @kerrzhao. Please provide a online reproduction by forking this link https://u.ant.design/codesandbox-repro. Issues labeled by Need Reproduce will be closed if no activities in 7 days.

@yesmeck https://codesandbox.io/s/3rxj27q281 这里是代码演示。 预想效果是往动态框里设置默认值。

就像警告说的，你不能在 field 注册前去设置它的值，你在 componentDidMount 里设置 names_2 的值的时候，它还没有被注册。

Hello @kerrzhao, we use GitHub issues to trace bugs or discuss plans of Ant Design. So, please don't ask usage questions here. You can try to ask questions on Stack Overflow or Segment Fault, then apply tag antd and react to your question.

setFieldsValue这个方法调用的时候，form没有注册，使用setFields试试看 @kerrzhao

Same problem. English please.

@naefl As warning stated, you can not call setFieldsValue before field been registered.

@naefl try 'setFields' instead

@naefl We can use the initialValue instead and set the field value to state example :https://codesandbox.io/s/3rxj27q281

Having this same issue:

Occurs occasionally, but never the first time a component is mounted on React Native.

What is strange about this, is that setFieldValues should only be called well after the form has rendered.

class Login extends React.Component {
  componentDidMount() {
    this.getStoredSettings()
  }
  getStoredSettings = async () => {
    const canLogin = await getItem('token')
    if (!canLogin) {
      const creds = await getItem('credentials')
      if (creds) {
        // update values with creds
        const { email, password } = JSON.parse(creds)
        try {
          this.props.form.setFieldsValue({
            email,
            password,
          })
        } catch (error) {
          console.log(error)
        }
      }
    }
  }

  render() {
    const { form, initialValues } = this.props
    const { email, password } = initialValues
    const { getFieldProps } = form
    return (
            <Form>
              <InputItem
                {...getFieldProps('email', {
               initialValue: email,
             })}
              />

              <InputItem
                {...getFieldProps('password', {
               initialValue: password,
             })}
                type='password'
              />
            </Form>          
    )
  }
}

const LoginForm = createForm()(Login)

const mapState = (state) => {
  return {
    initialValues: {
      email: __DEV__ ? DEFAULT_EMAIL : '',
      password: __DEV__ ? DEFAULT_PASSWORD : '',
    },
 }
}

export default connect(mapState)(LoginForm)

@gitdust dose it work ?

@fenghuizhang it's work for me

why not like this ?
const formData = { name: data.name, title: data.title, desc: data.desc, link: data.link, }; this.props.form.setFieldsValue(formData);
maybe is your fields has one not in the from

if your form doesn't have the fields these you set, this error will appear!

I having this same issue:
You cannot set field before registering it.
but the reason was finally found:I set a value to fields that form does not exist,caused an error to appear!
Thanks @yanzishang,your answer gave me great help in solving problems.

多数是写错label了

if field not set, warning too.
so, first set field, like: form.getFieldDecorator('fieldName', { initialValue: {} }) in render(),
then setFieldValue in your methods.

it works for me~

I'm having the same issue.

I think it's related to the field value being an object like @kerrzhao said:

Example this.props.form.setFields( { "minAmount-1" : {value : 111} } ); .

The field is set. if I do fields.hasOwnProperty(myField) it's returning true.

i has the same issue,the reason is that,et a value to fields that form does not exist

@guixuefeng101 the same with me

The error should really say:
"You cannot set field before rendering a field associated with the value."

"Registering" sounds like the problem is internal to the Ant framework, and has no meaning to new developers.

@joeheyming You can send a PR to improve that instruction.

@afc163 any pointers to where this message is? I can't find it

@afc163 https://github.com/react-component/form/pull/191

use getFieldDecorator's initialValue instead setFields or setFieldsValue

I have the similar issue, but thanks to @gitdust, your solution solved my problem perfectly.
I need to set the initial value dynamic, because there are many conditions with different initial value.
I abandoned the default initial value prop, use form.setFields before render method instead. Thanks!

you can first set the form, like this

表单组件里只有A和B，而你set的对象里多了一个C

if your form doesn't have the fields these you set, this error will appear!

works for me , great!

How to ignore this warning?

@kerrzhao I'm trying to put setFieldsValue in setStateafter, the warning is disappear and the problem is solved;

the code is below:

this.setState({ addOptionsList: newAddOptionsList }, () => { setFieldsValue({ [modifyedContent${value}]: '' }); });

if your form doesn't have the fields these you set, this error will appear!

sixsixsix

try form.getFieldDecorator('fieldName', { initialValue: your_value })

you should definition your fields with v-decorator in form, like:

<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="description" hasFeedback>
    <a-textarea v-decorator="['description']"/>
</a-form-item>

document can be more clearer in this kind of important message.

if your form doesn't have the fields these you set, this error will appear!

awesome

i had the same problem as my field name is set to a random value 'astermihagauvlent', i fixed it by changing the field name to 'keys'

initialValue is not going to change after first render, just like defaultValue. Try setFieldValue or mapPropsToFields in this situation.

example:
if(this.props.form.getFieldValue('version')){
this.props.form.setFieldsValue({
version: info.version,
});
}

you set a fields which you don't have. : )

多数是写错label了

真相了

@ShMcK it works for me, thanks a lot ：）

getFieldsValue 即可。

Make sure field registered before setFieldsValue
```javascript
const { form } = this.props;
if (undefined !== form.getFieldValue('foo')) {
form.setFieldsValue({
foo: 'hello world',
});
}
````

if your form doesn't have the fields these you set, this error will appear!

Thx

For me, the issue was due to me calling setFieldsValue with an object that had several fields, while my form only had one field.

Here is a function you can use to

const  dataIWantToFillFormWith = { "test1": "dummy data", "test2": "more dummy data" }

Object.keys(form.getFieldsValue()).forEach(key => {
      const obj = {};
      obj[key] = dataIWantToFillFormWith[key] || null;
       setFieldsValue(obj)

Using that function, it will ignore any fields that do not exist in the form.

use getFieldDecorator's initialValue instead setFields or setFieldsValue

you can't use resetFields reset it when use getFieldDecorator's initialValue

For me, the issue was due to me calling setFieldsValue with an object that had several fields, while my form only had one field.

Here is a function you can use to

const  dataIWantToFillFormWith = { "test1": "dummy data", "test2": "more dummy data" }

Object.keys(form.getFieldsValue()).forEach(key => {
      const obj = {};
      obj[key] = dataIWantToFillFormWith[key] || null;
       setFieldsValue(obj)

Using that function, it will ignore any fields that do not exist in the form.

This was the only solution found in the universe that worked useEffect hooks

if your form doesn't have the fields these you set, this error will appear!

love you

for me, i have multiple forms. The error i found is just caused by wrong form instance, that's why i pretty sure that the field has been registered, but cannot be set value via setFieldsValue. So sad for me|_|