React: eslint-plugin-react-hooks: خطأ "الخطاف المشروط" خارج الشرط

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

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

BUG (ربما)

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

يُظهر المكون الإضافي هذا الخطأ:

يتم استدعاء React Hook "useState" بشكل مشروط. يجب استدعاء خطافات React بنفس الترتيب بالضبط في كل تصيير مكون. هل اتصلت عن طريق الخطأ بخطاف React بعد عودة مبكرة؟ (خطاطيف التفاعل / قواعد الخطافات) eslint

لكنني لا أعتقد أنني أستدعي أي خطاف مشروط.

الرمز:

https://codesandbox.io/s/exciting-bhabha-mqj7q

function App(props) {
  const someObject = { propA: true, propB: false };

  for (const propName in someObject) {
    if (propName === true) {
      console.log("something");
    } else {
      console.log("whatever");
    }
  }

  // THE PLUGIN ERROR MSG ON THIS useState
  const [myState, setMyState] = useState(null);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

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

لن يُظهر المكون الإضافي الخطأ في هذه الحالة.

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

ESLint Rules Bug

مصدر

cbdeveloper

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

تم دمج https://github.com/facebook/react/pull/16853.

gaearon في ٢٥ فبراير ٢٠٢٠

❤2

ال 4 كومينتر

لقد لاحظت أنه بالنسبة لهذا المثال بالذات:

pathsFromStartToEnd هو 3
allPathsFromStartToEnd هو 2

أيضًا possiblyHasEarlyReturn true

يتم الإبلاغ عن هذا الخطأ المحدد عندما يكون pathsFromStartToEnd و allPathsFromStartToEnd غير متساويين.

راجع RulesOfHooks.js سطر 404

إذا قمت بتجريد الكود الموجود داخل حلقة for..in في دالة منفصلة ، فسيختفي خطأ النسالة.

في هذه الحالة ، يساوي كل من pathsFromStartToEnd و allPathsFromStartToEnd 2 :

  const someObject = { propA: true, propB: false };
  const someFunction = (propName) => {
    if (propName === true) {
      console.log("something");
    } else {
      console.log("whatever");
    }
  }
  for (const propName in someObject) {
    someFunction(propName)
  }
  const [myState, setMyState] = useState(null);

ما زلت غير متأكد من السبب.

dankreiger في ٢٠ سبتمبر ٢٠١٩

gaearon ، لقد أنشأت MR عنونة وإصلاح هذه المشكلة (# 16853).

السبب الرئيسي لحدوث ذلك هو أن قيمة allPathsFromStartToEnd محسوبة بشكل خاطئ.
في هذا المثال ، يجب أن يكون عدد المسارات من البداية إلى النهاية 3 ، لكن الدالة ترجع 2.

سبب حدوث ذلك هو بسبب التخزين المؤقت المعيب للمسارات الدورية. لذلك في الرسم البياني العادي ، نحتاج إلى سجل المسار أيضًا ، لكنه لا يتطلب سوى قائمة من العناصر الدورية ، والعناصر المؤدية إلى هذا المسار غير معروفة.
نتيجة لذلك ، عند استخدام شرط في for...in obj ، بناءً على الاتجاه قد نفقد بعض المسارات.

M-Izadmehr في ٢٢ سبتمبر ٢٠١٩

لا تزال هذه مشكلة مع 2.4.0 ، وهي عبارة عن إعادة صياغة أبسط قليلاً:

import * as React from "react";

function Component() {
  let isLastEven = false;
  for (let x of [1, 2, 3]) {
    if (x % 2 == 0) {
      isLastEven = true;
    } else {
      isLastEven = false;
    }
  }
  let y = React.useMemo(() => 1, []);
  return <div>{y}</div>;
}

هل يمكن إعادة فتح # 16853؟