Ant-design: Você não pode definir o campo antes de registrá-lo ao definir o valor para item de formulário dinâmico

Criado em 9 jan. 2018  ·  48Comentários  ·  Fonte: ant-design/ant-design

Versão

3.1.1

Ambiente

MAC 、 cromo 63.0.3239.84 (64) 、 antd 3.1.1

Link de reprodução

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

Passos para reproduzir

Valor de conjunto de item de formulário dinâmico,
`const formItems = keys.map ((k, index) => {
Retorna (
{... formItemLayoutWithOutLabel}
obrigatório = {verdadeiro}
chave = {k}
>
{getFieldDecorator (minAmount - $ {k}, {
as regras: [{
obrigatório: verdadeiro,
mensagem: "请 输入 大于 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} } ); .

O que é esperado?

Defina o valor como campos comuns.

O que realmente está acontecendo?

Você não pode definir o campo antes de registrá-lo.


Ao editar os dados da linha e definir os dados para o item de formulário dinâmico.

Usage

Comentários muito úteis

se o seu formulário não tiver os campos que você configurou, esse erro aparecerá!

Todos 48 comentários

Olá @kerrzhao. Forneça uma reprodução online bifurcando este link https://u.ant.design/codesandbox-repro. Os problemas identificados por Need Reproduce serão encerrados se não houver atividades em 7 dias.

@yesmeck https://codesandbox.io/s/3rxj27q281 Aqui está a demonstração do código. O efeito esperado é definir o valor padrão na caixa dinâmica.

Assim como o aviso, você não pode definir o valor do campo antes de registrar.Quando você define o valor de names_2 no componentDidMount, ele ainda não foi registrado.

Olá @kerrzhao , usamos os problemas do GitHub para rastrear bugs ou discutir os planos do Ant Design. Portanto, não faça perguntas sobre o uso aqui. Você pode tentar fazer perguntas no Stack Overflow ou Segment Fault e , em seguida, aplicar as tags antd e react à sua pergunta.

setFieldsValue este método é chamado, form não setFields tentar @kerrzhao

Mesmo problema. Inglês, por favor.

@naefl Como o aviso afirmado, você não pode chamar setFieldsValue antes do campo ser registrado.

@naefl tente 'setFields' ao invés

@naefl Podemos usar initialValue vez disso e definir o valor do campo para indicar o exemplo: https://codesandbox.io/s/3rxj27q281

Tendo este mesmo problema:

Ocorre ocasionalmente, mas nunca na primeira vez que um componente é montado no React Native.

O que é estranho sobre isso, é que setFieldValues só deve ser chamado bem depois que o formulário foi renderizado.

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

@fenghuizhang é trabalho para mim

porque não assim?
const formData = { name: data.name, title: data.title, desc: data.desc, link: data.link, }; this.props.form.setFieldsValue(formData);
talvez seus campos não tenham um de

se o seu formulário não tiver os campos que você configurou, esse erro aparecerá!

Estou tendo o mesmo problema:
Você não pode definir o campo antes de registrá-lo.
mas o motivo foi finalmente encontrado: eu configurei um valor para campos que o formulário não existe, causou o aparecimento de um erro!
Obrigado @yanzishang , sua resposta me ajudou muito na resolução de problemas.

A maioria dos rótulos estão errados

se o campo não for definido, aviso também.
então, primeiro defina o campo, como: form.getFieldDecorator('fieldName', { initialValue: {} }) em render (),
então setFieldValue em seus métodos.

funciona para mim ~

Estou tendo o mesmo problema.

Acho que está relacionado ao valor do campo ser um objeto como @kerrzhao disse:

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

O campo está definido. se eu fizer fields.hasOwnProperty (myField) ele está retornando true.

eu tenho o mesmo problema, o motivo é que, et um valor para os campos desse formulário não existe

@ guixuefeng101 o mesmo comigo

O erro deveria realmente dizer:
"Você não pode definir o campo antes de renderizar um campo associado ao valor."

"Registrar" parece que o problema é interno ao framework Ant e não tem significado para novos desenvolvedores.

@joeheyming Você pode enviar um PR para melhorar essa instrução.

@ afc163 alguma

use o initialValue de getFieldDecorator em vez de setFields ou setFieldsValue

Tenho um problema semelhante, mas graças a @gitdust , sua solução resolveu meu problema perfeitamente.
Preciso definir o valor inicial dinâmico, porque existem muitas condições com valores iniciais diferentes.
Abandonei o valor inicial prop padrão, uso form.setFields antes do método de renderização. Obrigado!

você pode primeiro definir o formulário, como este

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

Existem apenas A e B no componente de formulário, e há um C extra no objeto do seu conjunto

se o seu formulário não tiver os campos que você configurou, esse erro aparecerá!

funciona para mim, ótimo!

Como ignorar esse aviso?

@kerrzhao Estou tentando colocar setFieldsValue em setState depois, o aviso desaparecer e o problema resolvido;

o código está abaixo:

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

se o seu formulário não tiver os campos que você configurou, esse erro aparecerá!

seis seis seis

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

você deve definir seus campos com v-decorator no formulário, como:

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

documento pode ser mais claro neste tipo de mensagem importante.

se o seu formulário não tiver os campos que você configurou, esse erro aparecerá!

incrível

Tive o mesmo problema porque o nome do meu campo está definido com um valor aleatório 'astermihagauvlent', resolvi isso alterando o nome do campo para 'chaves'

initialValue não vai mudar após a primeira renderização, assim como defaultValue. Tente setFieldValue ou mapPropsToFields nesta situação.

exemplo:
if (this.props.form.getFieldValue ('version')) {
this.props.form.setFieldsValue ({
versão: info.version,
});
}

você define um campo que você não tem. :)

A maioria dos rótulos estão errados

A verdade

@ShMcK funciona para mim, muito obrigado :)

getFieldsValue está bem.

Certifique-se de que o campo esteja registrado antes de setFieldsValue
`` `javascript
const {form} = this.props;
if (undefined! == form.getFieldValue ('foo')) {
form.setFieldsValue ({
foo: 'hello world',
});
}
`` ``

se o seu formulário não tiver os campos que você configurou, esse erro aparecerá!

Valeu

Para mim, o problema era porque eu chamava setFieldsValue com um objeto que tinha vários campos, enquanto meu formulário tinha apenas um campo.

Aqui está uma função que você pode 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 essa função, ele irá ignorar todos os campos que não existam no formulário.

use o initialValue de getFieldDecorator em vez de setFields ou setFieldsValue

você não pode usar resetFields; redefina-o quando usar o initialValue de getFieldDecorator

Para mim, o problema era porque eu chamava setFieldsValue com um objeto que tinha vários campos, enquanto meu formulário tinha apenas um campo.

Aqui está uma função que você pode 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 essa função, ele irá ignorar todos os campos que não existam no formulário.

Esta foi a única solução encontrada no universo que funcionou ganchos useEffect

se o seu formulário não tiver os campos que você configurou, esse erro aparecerá!

amo-te

para mim, tenho vários formulários. O erro que encontrei é causado apenas por instância incorreta do formulário, é por isso que tenho certeza que o campo foi registrado, mas não pode ser definido o valor por meio de setFieldsValue . Tão triste para mim | _ |

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

mineralres picture mineralres  ·  3Comentários

plandem picture plandem  ·  3Comentários

tangsj picture tangsj  ·  3Comentários

drcmda picture drcmda  ·  3Comentários

tianyacsdn picture tianyacsdn  ·  3Comentários