Ant-design: لا يمكنك تعيين الحقل قبل تسجيله عند تعيين القيمة لعنصر النموذج الديناميكي

تم إنشاؤها على ٩ يناير ٢٠١٨  ·  48تعليقات  ·  مصدر: ant-design/ant-design

إصدار

3.1.1

بيئة

MAC كروم 63.0.3239.84 (64) 、 أنتد 3.1.1

رابط الاستنساخ

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

خطوات التكاثر

قيمة مجموعة عنصر الشكل الديناميكي ،
`const formItems = keys.map ((k، index) => {
إرجاع (
{... formItemLayoutWithOutLabel}
مطلوب = {صحيح}
مفتاح = {ك}
>
{getFieldDecorator (minAmount - $ {k}، {
قواعد: [{
مطلوب: صحيح ،
الرسالة: "请 输入 大于 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 أيام.

yesmeck https://codesandbox.io/s/3rxj27q281 إليك عرض الكود. التأثير المتوقع هو تعيين القيمة الافتراضية في المربع الديناميكي.

تمامًا مثل التحذير ، لا يمكنك تعيين قيمة الحقل قبل التسجيل. عند تعيين قيمة names_2 في componentDidMount ، لم يتم تسجيله بعد.

مرحبًا kerrzhao ، نستخدم مشكلات GitHub لتتبع الأخطاء أو مناقشة خطط Ant Design. لذا ، من فضلك لا تسأل أسئلة الاستخدام هنا. يمكنك محاولة طرح أسئلة حول Stack Overflow أو Segment Fault ، ثم قم بتطبيق العلامة antd و react على سؤالك.

setFieldsValue استدعاء هذه الطريقة ، لم form تسجيل setFields لتجربة kerrzhao

نفس المشكلة. الإنجليزية من فضلك.

naefl كما ذكر التحذير ، لا يمكنك استدعاء setFieldsValue قبل تسجيل الحقل.

naefl جرب "setFields" بدلاً من ذلك

naefl يمكننا استخدام initialValue بدلاً من ذلك وتعيين قيمة الحقل على سبيل المثال: https://codesandbox.io/s/3rxj27q281

تواجه نفس المشكلة:

يحدث أحيانًا ، ولكن ليس في المرة الأولى التي يتم فيها تثبيت مكون على React Native.

الغريب في هذا الأمر هو أنه لا يجب استدعاء 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 ، أعطتني إجابتك مساعدة كبيرة في حل المشكلات.

معظم التسميات خاطئة

إذا لم يتم تعيين الحقل ، تحذير أيضًا.
لذلك ، حقل المجموعة الأولى ، مثل: form.getFieldDecorator('fieldName', { initialValue: {} }) في العرض () ،
ثم setFieldValue في الأساليب الخاصة بك.

يعمل لي ~

لدي نفس المشكلة.

أعتقد أنه مرتبط بقيمة الحقل لكونه كائنًا مثل @ kerrzhao قال:

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

تم تعيين المجال. إذا قمت بعمل الحقول. hasOwnProperty (myField) فسيكون ذلك صحيحًا.

لدي نفس المشكلة ، والسبب هو أن قيمة الحقول التي شكلها غير موجودة

@ guixuefeng101 نفس الشيء معي

يجب أن يقول الخطأ حقًا:
"لا يمكنك تعيين الحقل قبل تقديم حقل مرتبط بالقيمة."

"التسجيل" يبدو أن المشكلة داخلية في إطار عمل Ant ، وليس لها أي معنى للمطورين الجدد.

joeheyming يمكنك إرسال العلاقات العامة لتحسين تلك التعليمات.

@ afc163 أي مؤشرات إلى أين هذه الرسالة؟ لا يمكنني العثور عليه

استخدم initialValue من getFieldDecorator بدلاً من setFields أو setFieldsValue

لدي مشكلة مماثلة ، ولكن بفضل gitdust ، حل
أحتاج إلى تعيين القيمة الأولية الديناميكية ، لأن هناك العديد من الشروط ذات القيمة الأولية المختلفة.
لقد تخلت عن خاصية القيمة الأولية الافتراضية ، فاستخدم form.setFields قبل طريقة التقديم بدلاً من ذلك. شكرا!

يمكنك أولاً تعيين النموذج ، مثل هذا

{_.isEmpty (collectDetail) && this.props.location.state.type === 'تحرير'؟ : باطل }

لا يوجد سوى A و B في مكون النموذج ، وهناك حرف C إضافي في كائن مجموعتك

إذا كان النموذج الخاص بك لا يحتوي على الحقول التي قمت بتعيينها ، فسيظهر هذا الخطأ!

يعمل معي ، عظيم!

كيف تتجاهل هذا التحذير؟

kerrzhao أحاول وضع setFieldsValue في setState بعد ذلك ، يختفي التحذير ويتم حل المشكلة ؛

الكود أدناه:

this.setState({ addOptionsList: newAddOptionsList }, () => { setFieldsValue({ [ modifiededContent $ {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" ، قمت بإصلاحها عن طريق تغيير اسم الحقل إلى "مفاتيح"

لن تتغير قيمة initialValue بعد العرض الأول ، تمامًا مثل defaultValue. جرب setFieldValue أو mapPropsToFields في هذه الحالة.

مثال:
إذا (this.props.form.getFieldValue ('version')) {
this.props.form.setFieldsValue ({
الإصدار: info.version ،
}) ؛
}

قمت بتعيين الحقول التي ليس لديك. :)

معظم التسميات خاطئة

الحقيقه

ShMcK إنه يعمل بالنسبة لي ، شكرًا جزيلاً :)

getFieldsValue جيد.

تأكد من تسجيل الحقل قبل setFieldsValue
`` جافا سكريبت
const {form} = this.props؛
إذا (undefined! == form.getFieldValue ('foo')) {
form.setFieldsValue ({
foo: "أهلًا بالعالم" ،
}) ؛
}
""

إذا كان النموذج الخاص بك لا يحتوي على الحقول التي قمت بتعيينها ، فسيظهر هذا الخطأ!

شكرا

بالنسبة لي ، كانت المشكلة بسبب أنني اتصلت بـ 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)

باستخدام هذه الوظيفة ، ستتجاهل أي حقول غير موجودة في النموذج.

استخدم initialValue من getFieldDecorator بدلاً من setFields أو setFieldsValue

لا يمكنك استخدام إعادة تعيين الحقول عند استخدام القيمة المبدئية لـ getFieldDecorator

بالنسبة لي ، كانت المشكلة بسبب أنني اتصلت بـ 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 التقييمات