React: تحذير عندما يستخدم المكون المذكر كلاً من الخطافات والتعليق

تم إنشاؤها على ٧ فبراير ٢٠١٩ · 4تعليقات · مصدر: facebook/react

هل تريد طلب ميزة أو الإبلاغ عن خطأ ؟

حشرة

ما هو السلوك الحالي؟

يوجد تحذير معروض في وحدة التحكم للمكون الذي تم استيفاء جميع الشروط التالية:

يتم حفظها باستخدام React.memo
يستخدم الخطافات
يستخدم التشويق (هناك وعد).

نص هذا التحذير: Warning: ComponentName: Rendered more hooks than during the previous render. This is not currently supported and may lead to unexpected behavior.

إذا كان السلوك الحالي عبارة عن خطأ ، فالرجاء تقديم خطوات إعادة الإنتاج ، وإذا أمكن عرضًا بسيطًا للمشكلة. الصق الرابط إلى JSFiddle (https://jsfiddle.net/Luktwrdm/) أو مثال CodeSandbox (https://codesandbox.io/s/new) أدناه:

https://codesandbox.io/s/71lr16j491

ما هو السلوك المتوقع؟

يجب عدم عرض أي تحذير لأنه تم استيفاء قواعد الخطافات. أيضًا ، يجب أن يكون السلوك ثابتًا بغض النظر عما إذا كان React.memo مستخدمًا أم لا.

ما إصدارات React وأي متصفح / نظام تشغيل متأثر بهذه المشكلة؟

رد فعل 16.8.1

Hooks Bug

مصدر

trojanowski

👍3

التعليق الأكثر فائدة

ثابت في 16.8.2.
https://codesandbox.io/s/vmmkmvo6pl

gaearon في ١٤ فبراير ٢٠١٩

👍2

ال 4 كومينتر

قراءتي الأولى هي أن هذا خطأ.

gaearon في ٨ فبراير ٢٠١٩

لقد لاحظت هذه المشكلة نفسها في الإصدار 16.8.1 . ولكن في حالتي هناك لم memoized عنصر بين المكان الذي يوجد فيه Promise يتم طرح و Suspense المكون.

يعلن المكون عن خطافين في الأعلى ، قبل إلقاء Promise ويظهر التحذير. قمت بنقل المكالمة بإلقاء Promise في الأعلى ، قبل الخطافات ويحدث نفس الشيء. يختفي التحذير إذا لم يتم طرح Promise داخل المكون.

محاكاة مكوني هي شيء مثل:

function Component(props) {
  const [state, setState] = useState()
  useEffect(...)

  // Promise is thrown somewhere after these two
  // hooks on top, but before the return statement.
  return (
    ...
  )
}