Ant-design: 動的フォームアイテムに値を設定する場合、登録する前にフィールドを設定することはできません

作成日 2018年01月09日  ·  48コメント  ·  ソース: ant-design/ant-design

バージョン

3.1.1

環境

MAC、クロム63.0.3239.84(64)、antd 3.1.1

複製リンク

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

再現する手順

動的フォームアイテムの設定値、
`const formItems = keys.map((k、index)=> {
戻る (
{... formItemLayoutWithOutLabel}
required = {true}
key = {k}
>>
{getFieldDecorator(minAmount- $ {k}、{
ルール:[{
必須:true、
メッセージ:「请入大表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} } );

何が期待されますか?

共通フィールドとして値を設定します。

実際に何が起こっているのですか?

登録する前にフィールドを設定することはできません。


行データを編集し、データを動的フォームアイテムに設定する場合。

Usage

最も参考になるコメント

フォームに設定したフィールドがない場合、このエラーが表示されます。

全てのコメント48件

こんにちは@kerrzhao。 このリンクhttps://u.ant.design/codesandbox-reproをフォークして、オンライン複製を提供してNeed Reproduceラベルが付いた問題は、7日以内にアクティビティがない場合はクローズされます。

@yesmeckhttps //codesandbox.io/s/3rxj27q281これがコードデモです。期待される効果は、ダイナミックボックスにデフォルト値を設定することです。

警告と同様に、登録する前にフィールドの値を設定することはできません。componentDidMountでnames_2の値を設定した場合、まだ登録されていません。

こんにちは@kerrzhao 、私たちはGitHubの問題を使用してバグを追跡したり、 使用法に関する質問StackOverflowまたはSegmentFaultについて質問してから、タグantdおよびreactを質問に適用できます。

setFieldsValueこのメソッドが呼び出されたform登録されていません。 setFieldsして@kerrzhao setFields試してください

同じ問題。 英語でお願いします。

@naefl警告に記載されているように、フィールドが登録される前にsetFieldsValue呼び出すことはできません。

@naefl代わりに「setFields」を試してください

@naefl代わりにinitialValue使用して、フィールド値を状態の例に設定できます: https

これと同じ問題があります:

ときどき発生しますが、コンポーネントがReactNativeに初めてマウントされることはありません。

これについて奇妙なのは、 setFieldValuesは、フォームがレンダリングされた後でのみ呼び出す必要があるということです。

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はそれが

@fenghuizhangそれは私のために働いています

なぜこれが好きではないのですか?
const formData = { name: data.name, title: data.title, desc: data.desc, link: data.link, }; this.props.form.setFieldsValue(formData);
多分あなたのフィールドはからではないものを持っています

フォームに設定したフィールドがない場合、このエラーが表示されます。

私はこれと同じ問題を抱えています:
登録する前にフィールドを設定することはできません。
しかし、最終的に理由が見つかりました:フォームが存在しないフィールドに値
@yanzishangに感謝し

ほとんどのラベルが間違っています

フィールドが設定されていない場合は、警告も表示されます。
したがって、最初にフィールドを設定します。たとえば、render()のform.getFieldDecorator('fieldName', { initialValue: {} })
次に、メソッドでsetFieldValueを実行します。

それは私のために働きます〜

私は同じ問題を抱えています。

@kerrzhaoが言ったようなオブジェクトであるフィールド値に関連していると思います:

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

フィールドが設定されます。 fields.hasOwnProperty(myField)を実行すると、trueが返されます。

私は同じ問題を抱えています、その理由は、形成されるフィールドへの値が存在しないということです

@ guixuefeng101私と同じ

エラーは本当に言うべきです:
「値に関連付けられたフィールドをレンダリングする前にフィールドを設定することはできません。」

「登録」は、問題がAntフレームワークの内部にあるように聞こえ、新しい開発者にとっては意味がありません。

@joeheymingその指示を改善するためにPRを送信できます。

@ afc163このメッセージがどこにあるかへのポインタはありますか? 見つかりません

setFieldsまたはsetFieldsValueの代わりにgetFieldDecoratorのinitialValueを使用してください

私も同様の問題を抱えていますが、 @ gitdustのおかげで、あなたの解決策は私の問題を完全に解決しました。
初期値が異なる条件が多いので、初期値を動的に設定する必要があります。
デフォルトの初期値propを放棄し、代わりにrenderメソッドの前にform.setFieldsを使用しました。 ありがとう!

このように最初にフォームを設定できます

{_.isEmpty(gatherDetail)&& this.props.location.state.type === '編集'? : ヌル }

フォームコンポーネントにはAとBのみがあり、セットのオブジェクトには余分なCがあります

フォームに設定したフィールドがない場合、このエラーが表示されます。

私のために働く、素晴らしい!

この警告を無視する方法は?

@kerrzhao setFieldsValuesetStateに入れようとしていますが、警告が消えて問題が解決しました。

コードは以下のとおりです。

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

フォームに設定したフィールドがない場合、このエラーが表示されます。

sixsixsix

form.getFieldDecorator('fieldName', { initialValue: your_value })お試しください

次のような形式でv-decoratorしてフィールドを定義する必要があります。

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

この種の重要なメッセージでは、ドキュメントがより明確になる可能性があります。

フォームに設定したフィールドがない場合、このエラーが表示されます。

驚くばかり

フィールド名がランダムな値「astermihagauvlent」に設定されているのと同じ問題が発生しました。フィールド名を「keys」に変更して修正しました。

initialValueは、defaultValueのように、最初のレンダリング後に変更されることはありません。 この状況では、setFieldValueまたはmapPropsToFieldsを試してください。

例:
if(this.props.form.getFieldValue( 'version')){
this.props.form.setFieldsValue({
バージョン:info.version、
});
}

持っていないフィールドを設定します。 :)

ほとんどのラベルが間違っています

真実

@ShMcKそれは私のために働きます、どうもありがとう:)

getFieldsValueは問題ありません。

setFieldsValue前にフィールドが登録されていることを確認してください
`` `javascript
const {form} = this.props;
if(undefined!== form.getFieldValue( 'foo')){
form.setFieldsValue({
foo: 'hello world'、
});
}
「」

フォームに設定したフィールドがない場合、このエラーが表示されます。

THX

私にとって、この問題は、フォームに1つのフィールドしかないのに、複数のフィールドを持つオブジェクトでsetFieldsValueを呼び出すことが原因でした。

これがあなたが使うことができる機能です

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

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

その関数を使用すると、フォームに存在しないフィールドはすべて無視されます。

setFieldsまたはsetFieldsValueの代わりにgetFieldDecoratorのinitialValueを使用してください

getFieldDecoratorのinitialValueを使用する場合はresetFieldsを使用できません。

私にとって、この問題は、フォームに1つのフィールドしかないのに、複数のフィールドを持つオブジェクトでsetFieldsValueを呼び出すことが原因でした。

これがあなたが使うことができる機能です

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

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

その関数を使用すると、フォームに存在しないフィールドはすべて無視されます。

これは、useEffectフックが機能する宇宙で見つかった唯一のソリューションでした

フォームに設定したフィールドがない場合、このエラーが表示されます。

愛している

私にとって、私は複数のフォームを持っています。 私が見つけたエラーは、間違ったフォームインスタンスが原因であるため、フィールドが登録されていることは確かですが、 setFieldsValue介して値を設定することはできません。 とても悲しい| _ |

このページは役に立ちましたか?
0 / 5 - 0 評価