React-tags: لا يؤدي تحديث خاصية الاقتراحات إلى تحديث قائمة الخيارات حتى الإدخال التالي (الإصدار 6)

مرحبًا yrik ، لا يتم توفير جلب البيانات بواسطة المكون ولكن يتم تنفيذه بنفسك. بينما لا يمكنني تصحيح أخطاء التطبيقات الفردية ، يسعدني تقديم بعض النصائح.

متابعة من الأمثلة الموجودة في # 205 ، أقترح إحضار المزيد من الاقتراحات أكثر مما تحتاج إلى عرضه. على سبيل المثال ، إذا كنت تعرض حاليًا 6 اقتراحات ، فحاول جلب 12 أو 15 من الخادم. بهذه الطريقة ، يجب أن يظل لدى suggestionsFilter بعض البيانات ذات الصلة لاستخدامها حتى يتم استلام بيانات جديدة.

شكرا لك على العودة!
إنها مشكلة مختلفة بعض الشيء.
تخيل أن لدي ميزة الإكمال التلقائي لكلمة " بيرة "

1. قائمة الاقتراحات فارغة ( [] )
2. أنواع المستخدمين " be " -> إرجاع الخادم [bee ، beard ، beetroot ، beer] (لا نعرض شيئًا لأن قائمة الخيارات لم يتم تحديثها حيث يقوم الخادم بإرجاع البيانات بعد استدعاء getOptions)
3. يكتب المستخدم " نحلة " -> إرجاع الخادم [نحلة ، شمندر ، بيرة] نعرض [نحلة ، لحية ، شمندر ، بيرة] ، نعرض بيانات تم تحديثها مسبقًا ، وليست حديثة
4. يكتب المستخدم " بيرة " -> إرجاع الخادم [بيرة] ، نعرض [نحلة ، جذر الشمندر ، بيرة] ، نعرض بيانات تم تحديثها مسبقًا ، وليست جديدة

إذا كان onInput سيكون async ، فسيعمل. أو إذا كانت هناك طريقة لاستدعاء const options = getOptions.call(this, query) من onInput المخصص ، فستعمل أيضًا.

حسنًا ، أعتقد أنني أتابع - لذلك قد يتم عرض اقتراحات لا يجب أن تتطابق مع الاستعلام الحالي ، فهل هذا صحيح؟

سأحاول وأعد إنشاء المشكلة باستخدام رمز المثال هذا

حسنًا ، أعتقد أنني أتابع - لذلك قد يتم عرض اقتراحات لا يجب أن تتطابق مع الاستعلام الحالي ، فهل هذا صحيح؟

بالضبط! في حالتي ، تظهر دائمًا نتيجة الاستعلام السابق. باستثناء الحالات التي يتم فيها تخزين الاستجابة مؤقتًا في المتصفح وإعادتها على الفور.

كنت أحاول إعادة إنشائه باستخدام jsfiddle لكنني لم أتمكن من توصيل lib هناك بشكل صحيح.
إذا كان لديك أي مثال أساسي لهذا البرنامج المساعد في jsfiddle ، يمكنني تمديده باستخدام مثال الإكمال التلقائي من جانب الخادم.

تجدر الإشارة أيضًا إلى أنني أستخدم الإصدار 6 والمثال الذي لديك يبدو وكأنه من الإصدار السابق.
"رد الفعل-الوسم-الإكمال التلقائي": "6.0.0-بيتا.5"

أعتقد أن هذه المشكلة قد تم تقديمها إلى الإصدار السادس من خلال الرغبة في تجنب componentWillReceiveProps() بسبب التغييرات في الإصدارات الأخيرة والقادمة من React. في الإصدار الجديد ، أعدت صياغة الاقتراحات ليتم تحديثها فقط على mount و onInput الذي لا يأخذ في الحسبان تغيير خاصية الاقتراحات.

يمكن حلها باستخدام getDerivedStateFromProps() لكنني أعتقد أن هذا الأسلوب سيتطلب بعض التحسين لمنع عمليات العرض غير الضرورية.

  static getDerivedStateFromProps (props, state) {
    const options = getOptions(props, state)
    return { options }
  }

لقد أمضيت بضع دقائق في هذا الأمر وأعتقد أنني توصلت إلى حل مناسب ، وتوضح الرسوم المتحركة أدناه الاقتراحات التي يتم تحديثها بشكل غير متزامن ويتم تحديث قائمة الخيارات دون أي إدخال آخر:

كان التغيير واضحًا جدًا ، لذا سأقوم ببعض الاختبارات وأرفع مستوى العلاقات العامة.

أعتقد أن useEffect يجب أن يغطي هذا بشكل جيد لأنه يمكنه مراقبة تغيير الخيارات.

useEffect(() => {
  setOptions(getOptions(props, state))
}, [options]);

لقد قمت بإصدار v6.0.0-beta.6 والذي يجب أن يحل هذه المشكلة.