Ant-design: No puede establecer un campo antes de registrarlo cuando establece el valor en un elemento de formulario dinámico

Creado en 9 ene. 2018  ·  48Comentarios  ·  Fuente: ant-design/ant-design

Versión

3.1.1

Medio ambiente

MAC 、 cromo 63.0.3239.84 (64) 、 antd 3.1.1

Enlace de reproducción

https://ant.design/components/form-cn/#components -form-demo-dynamic-form-item

pasos para reproducir

Valor de conjunto de elementos de formulario dinámico,
`const formItems = keys.map ((k, index) => {
regreso (
{... formItemLayoutWithOutLabel}
requerido = {verdadero}
clave = {k}
>
{getFieldDecorator (minAmount - $ {k}, {
normas: [{
requerido: cierto,
mensaje: "请 输入 大于 0 的 值",
}],
}) (

)}

      { (keys.length > 1) ? (
        <Button
        type="danger"
        disabled={keys.length === 1}
        onClick={() => this.remove(k)}
        >删除</Button>
      ) : null}
    </FormItem>
  );
});

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

¿Lo que es esperado?

Establecer valor como campos comunes.

¿Qué está pasando realmente?

No puede establecer un campo antes de registrarlo.


Cuando edite los datos de la fila y configure los datos en un elemento de formulario dinámico.

Usage

Comentario más útil

Si su formulario no tiene los campos que estableció, aparecerá este error.

Todos 48 comentarios

Hola @kerrzhao. Proporcione una reproducción en línea bifurcando este enlace https://u.ant.design/codesandbox-repro. Los problemas etiquetados con Need Reproduce se cerrarán si no hay actividades en 7 días.

@yesmeck https://codesandbox.io/s/3rxj27q281 Aquí está la demostración del código. El efecto esperado es establecer el valor predeterminado en el cuadro dinámico.

Al igual que la advertencia, no puede establecer el valor del campo antes de registrarse.Cuando establece el valor de names_2 en componentDidMount, aún no se ha registrado.

Hola @kerrzhao , usamos problemas de GitHub para rastrear errores o discutir planes de Ant Design. Por lo tanto, no haga preguntas sobre el uso aquí. Puede intentar hacer preguntas sobre Stack Overflow o Segment Fault , luego aplicar la etiqueta antd y react a su pregunta.

setFieldsValue se llama a este método, form no setFields probar @kerrzhao

El mismo problema. En inglés por favor.

@naefl Como se indica en la advertencia, no puede llamar a setFieldsValue antes de que se registre el campo.

@naefl prueba 'setFields' en su lugar

@naefl Podemos usar initialValue lugar y establecer el valor del campo en el ejemplo del estado: https://codesandbox.io/s/3rxj27q281

Tener este mismo problema:

Ocurre ocasionalmente, pero nunca la primera vez que se monta un componente en React Native.

Lo extraño de esto es que setFieldValues solo se debe llamar mucho después de que se haya procesado el formulario.

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 dosis funciona?

@fenghuizhang es un trabajo para mí

¿Por qué no me gusta esto?
const formData = { name: data.name, title: data.title, desc: data.desc, link: data.link, }; this.props.form.setFieldsValue(formData);
tal vez sus campos tienen uno no en el

Si su formulario no tiene los campos que estableció, aparecerá este error.

Tengo este mismo problema:
No puede establecer un campo antes de registrarlo.
pero finalmente se encontró la razón
Gracias @yanzishang , tu respuesta me ayudó mucho a resolver problemas.

La mayoría de las etiquetas son incorrectas.

si el campo no está configurado, también advertirá.
entonces, primer campo establecido, como: form.getFieldDecorator('fieldName', { initialValue: {} }) en render (),
luego setFieldValue en sus métodos.

funciona para mi ~

Tengo el mismo problema.

Creo que está relacionado con que el valor del campo sea un objeto como @kerrzhao dijo:

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

El campo está configurado. si hago fields.hasOwnProperty (myField), devuelve verdadero.

tengo el mismo problema, la razón es que, et un valor para los campos que formulario no existe

@ guixuefeng101 lo mismo conmigo

El error realmente debería decir:
"No puede establecer un campo antes de representar un campo asociado con el valor".

"Registrarse" parece que el problema es interno al framework Ant y no tiene ningún significado para los nuevos desarrolladores.

@joeheyming Puede enviar un PR para mejorar esa instrucción.

@ afc163 ¿Alguna sugerencia sobre dónde está este mensaje? No puedo encontrarlo

use el initialValue de getFieldDecorator en lugar de setFields o setFieldsValue

Tengo un problema similar, pero gracias a @gitdust , su solución resolvió mi problema perfectamente.
Necesito establecer el valor inicial dinámico, porque hay muchas condiciones con diferentes valores iniciales.
Abandoné el valor inicial predeterminado prop, utilicé form.setFields antes del método de representación en su lugar. ¡Gracias!

primero puede configurar el formulario, así

{_.isEmpty (collectDetail) && this.props.location.state.type === 'edit'? : nulo }

Solo hay A y B en el componente de formulario, y hay una C adicional en el objeto de su conjunto

Si su formulario no tiene los campos que estableció, aparecerá este error.

funciona para mí, ¡genial!

¿Cómo ignorar esta advertencia?

@kerrzhao Estoy tratando de poner setFieldsValue en setState después, la advertencia desaparece y el problema está resuelto;

el código está abajo:

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

Si su formulario no tiene los campos que estableció, aparecerá este error.

seis seis seis

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

debe definir sus campos con v-decorator en forma, como:

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

documento puede ser más claro en este tipo de mensaje importante.

Si su formulario no tiene los campos que estableció, aparecerá este error.

increíble

Tuve el mismo problema ya que mi nombre de campo está configurado en un valor aleatorio 'astermihagauvlent', lo solucioné cambiando el nombre del campo a 'claves'

initialValue no va a cambiar después del primer renderizado, al igual que defaultValue. Pruebe setFieldValue o mapPropsToFields en esta situación.

ejemplo:
if (this.props.form.getFieldValue ('versión')) {
this.props.form.setFieldsValue ({
versión: info.version,
});
}

establece un campo que no tiene. :)

La mayoría de las etiquetas son incorrectas.

La verdad

@ShMcK me funciona, muchas gracias :)

getFieldsValue está bien.

Asegúrese de que el campo esté registrado antes de setFieldsValue
`` `javascript
const {formulario} = this.props;
if (undefined! == form.getFieldValue ('foo')) {
form.setFieldsValue ({
foo: 'hola mundo',
});
}
`` ``

Si su formulario no tiene los campos que estableció, aparecerá este error.

Gracias

Para mí, el problema se debió a que llamé a setFieldsValue con un objeto que tenía varios campos, mientras que mi formulario solo tenía un campo.

Aquí hay una función que puede usar para

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

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

Usando esa función, ignorará cualquier campo que no exista en el formulario.

use el initialValue de getFieldDecorator en lugar de setFields o setFieldsValue

no puede usar resetFields restablecerlo cuando use el initialValue de getFieldDecorator

Para mí, el problema se debió a que llamé a setFieldsValue con un objeto que tenía varios campos, mientras que mi formulario solo tenía un campo.

Aquí hay una función que puede usar para

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

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

Usando esa función, ignorará cualquier campo que no exista en el formulario.

Esta fue la única solución encontrada en el universo que funcionó useEffect hooks

Si su formulario no tiene los campos que estableció, aparecerá este error.

te amo

para mí, tengo múltiples formas. El error que encontré es causado por una instancia de formulario incorrecta, por eso estoy bastante seguro de que el campo se ha registrado, pero no se puede establecer un valor a través de setFieldsValue . Muy triste para mi | _ |

¿Fue útil esta página
0 / 5 - 0 calificaciones