Ant-design: Vous ne pouvez pas définir le champ avant de l'enregistrer lorsque vous définissez la valeur sur un élément de formulaire dynamique

Créé le 9 janv. 2018  ·  48Commentaires  ·  Source: ant-design/ant-design

Version

3.1.1

Environnement

MAC (chrome 63.0.3239.84 (64)) et 3.1.1

Lien de reproduction

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

Étapes à reproduire

Valeur définie de l'élément de formulaire dynamique,
` const formItems = keys.map((k, index) => {
revenir (
{...formItemLayoutWithOutLabel}
requis={vrai}
clé={k}
>
{getFieldDecorator( minAmount-${k} , {
règles: [{
requis : vrai,
message : "请输入大于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} } ); .

Qu'est-ce qui est attendu ?

Définir la valeur en tant que champs communs.

Que se passe-t-il réellement ?

Vous ne pouvez pas définir le champ avant de l'enregistrer.


Lorsque vous modifiez les données de la ligne et définissez les données sur l'élément de formulaire dynamique.

Usage

Commentaire le plus utile

si votre formulaire n'a pas les champs que vous avez définis, cette erreur apparaîtra !

Tous les 48 commentaires

Bonjour @kerrzhao. Veuillez fournir une reproduction en ligne en forçant ce lien https://u.ant.design/codesandbox-repro. Les problèmes étiquetés par Need Reproduce seront fermés si aucune activité n'est effectuée dans les 7 jours.

@yesmeck https://codesandbox.io/s/3rxj27q281 Voici la démo du code. L'effet attendu est de définir la valeur par défaut dans la boîte dynamique.

Tout comme l'avertissement, vous ne pouvez pas définir la valeur du champ avant l'enregistrement. Lorsque vous définissez la valeur de names_2 dans componentDidMount, il n'a pas encore été enregistré.

Bonjour @kerrzhao , nous utilisons les problèmes GitHub pour tracer des bogues ou discuter des plans d'Ant Design. Alors, s'il vous plaît Stack Overflow ou Segment Fault , puis appliquer les balises antd et react à votre question.

setFieldsValue cette méthode est appelée, form pas enregistré, utilisez setFields essayer @kerrzhao

Même problème. En anglais s'il vous plaît.

@naefl Comme l'avertissement l'a indiqué, vous ne pouvez pas appeler setFieldsValue avant que le champ n'ait été enregistré.

@naefl essayez

@naefl Nous pouvons utiliser le initialValue place et définir la valeur du champ pour indiquer l'exemple : https://codesandbox.io/s/3rxj27q281

Ayant ce même problème:

Se produit occasionnellement, mais jamais la première fois qu'un composant est monté sur React Native.

Ce qui est étrange à ce sujet, c'est que setFieldValues ne devrait être appelé que bien après le rendu du formulaire.

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 ça marche ?

@fenghuizhang c'est du travail pour moi

pourquoi pas comme ça ?
const formData = { name: data.name, title: data.title, desc: data.desc, link: data.link, }; this.props.form.setFieldsValue(formData);
peut-être que vos champs en ont un pas dans le

si votre formulaire n'a pas les champs que vous avez définis, cette erreur apparaîtra !

J'ai ce même problème :
Vous ne pouvez pas définir le champ avant de l'enregistrer.
mais la raison a finalement été trouvée : j'ai défini une valeur pour les champs dont le formulaire n'existe pas, ce qui a provoqué l'apparition d'une erreur !
Merci @yanzishang , votre réponse m'a beaucoup aidé à résoudre les problèmes.

La plupart des étiquettes sont fausses

si le champ n'est pas défini, avertissement aussi.
donc, premier champ défini, comme : form.getFieldDecorator('fieldName', { initialValue: {} }) dans render(),
puis setFieldValue dans vos méthodes.

ça marche pour moi~

J'ai le même problème.

Je pense que c'est lié au fait que la valeur du champ est un objet comme l' a dit

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

Le terrain est défini. si je fais field.hasOwnProperty(myField), il renvoie true.

j'ai le même problème, la raison en est que, définissez une valeur pour les champs que la forme n'existe pas

@guixuefeng101 la même chose avec moi

L'erreur devrait vraiment dire :
"Vous ne pouvez pas définir de champ avant de rendre un champ associé à la valeur."

"L'enregistrement" semble que le problème est interne au framework Ant et n'a aucun sens pour les nouveaux développeurs.

@joeheyming Vous pouvez envoyer un PR pour améliorer cette instruction.

@afc163 des pointeurs vers l'endroit où se trouve ce message ? je ne le trouve pas

utilisez initialValue de getFieldDecorator à la place de setFields ou setFieldsValue

J'ai le même problème, mais grâce à @gitdust , votre solution a parfaitement résolu mon problème.
Je dois définir la valeur initiale dynamique, car il existe de nombreuses conditions avec une valeur initiale différente.
J'ai abandonné la prop de valeur initiale par défaut, utilisez plutôt form.setFields avant la méthode de rendu. Merci!

vous pouvez d'abord définir le formulaire, comme ceci

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

Il n'y a que A et B dans le composant form, et il y a un C supplémentaire dans l'objet de votre ensemble

si votre formulaire n'a pas les champs que vous avez définis, cette erreur apparaîtra !

fonctionne pour moi, super!

Comment ignorer cet avertissement ?

@kerrzhao J'essaie de mettre setFieldsValue dans setState après, l'avertissement disparaît et le problème est résolu ;

le code est ci-dessous :

this.setState({ addOptionsList: newAddOptionsList }, () => { setFieldsValue({ [ modifiéContenu${valeur} ]: '' }); });

si votre formulaire n'a pas les champs que vous avez définis, cette erreur apparaîtra !

six six Six

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

vous devez définir vos champs avec v-decorator sous forme, comme :

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

document peut être plus clair dans ce genre de message important.

si votre formulaire n'a pas les champs que vous avez définis, cette erreur apparaîtra !

impressionnant

j'ai eu le même problème car mon nom de champ est défini sur une valeur aléatoire 'astermihagauvlent', je l'ai corrigé en changeant le nom de champ en 'keys'

initialValue ne changera pas après le premier rendu, tout comme defaultValue. Essayez setFieldValue ou mapPropsToFields dans cette situation.

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

vous définissez des champs que vous n'avez pas. : )

La plupart des étiquettes sont fausses

La vérité

@ShMcK ça marche pour moi, merci beaucoup

getFieldsValue est correct.

Assurez-vous que le champ est enregistré avant setFieldsValue
```javascript
const { forme } = this.props;
if (undefined !== form.getFieldValue('foo')) {
form.setFieldsValue({
foo: 'bonjour tout le monde',
});
}
````

si votre formulaire n'a pas les champs que vous avez définis, cette erreur apparaîtra !

THX

Pour moi, le problème était dû au fait que j'appelais setFieldsValue avec un objet qui avait plusieurs champs, alors que mon formulaire n'avait qu'un seul champ.

Voici une fonction que vous pouvez utiliser pour

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

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

En utilisant cette fonction, il ignorera tous les champs qui n'existent pas dans le formulaire.

utilisez initialValue de getFieldDecorator à la place de setFields ou setFieldsValue

vous ne pouvez pas utiliser resetFields le réinitialiser lorsque vous utilisez initialValue de getFieldDecorator

Pour moi, le problème était dû au fait que j'appelais setFieldsValue avec un objet qui avait plusieurs champs, alors que mon formulaire n'avait qu'un seul champ.

Voici une fonction que vous pouvez utiliser pour

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

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

En utilisant cette fonction, il ignorera tous les champs qui n'existent pas dans le formulaire.

C'était la seule solution trouvée dans l'univers qui fonctionnait avec les crochets d'effet

si votre formulaire n'a pas les champs que vous avez définis, cette erreur apparaîtra !

je t'aime

pour moi, j'ai plusieurs formes. L'erreur que j'ai trouvée est simplement causée par une mauvaise instance de formulaire, c'est pourquoi je suis presque sûr que le champ a été enregistré, mais ne peut pas être défini via setFieldsValue . Tellement triste pour moi|_|

Cette page vous a été utile?
0 / 5 - 0 notes