خطأ Hooks can only be called inside the body of a function component في React.js؟

ال hooks وظيفتها تكون ضمن ال component، فمثلا ال hook التي قمت باستعمالها تقوم بالإضافة إلى ال state، و بالتالي لا معنى من وجودها خارج ال component.

و هذا تماما ما يقوله لك الخطأ.

يمكنك تصحيح الكود عن طريق إدخال ال hook إلى داخل التابع بالشكل التالي:

import React, { useState } from "react";


export const MyComponent = (props) => {
  	const [count, setCount] = useState(0);
	return <span>{count}</span>
}

لكل لغة او منصة برمجية قواعد وشروط يجب قراءتها قبل الشروع بتنفيذ التكويد بواسطها. أن React أضافت في نسختها version 16.8  ال Hooks الى مجموعة أدواتها وهي طريقة أكثر سهولة لكتابة الcomponents تنصح به React  كبديل لل class component ليس بإعادة كتابة الأعمال المنجزة بالطريقة السابقة ولكن للأعمال الجديدة التي تنوي إنجازها.

لايمكنك إستدعاء دوال Hooks مثل useState  و useEffect وغيرها خارج ال component كما تفعل في مثالك المدرج, كما لا يمكنك إستدعاء هذه الدوال داخل حلقات التكرار loops أو الدوال المتداخلة  nested functions او داخل جمل شرطية conditions.

تأكد دائماً أن تضع هذه الدوال في المستوى ألأعلى top-level من الcomponent. يمكنك قراءة المزيد عن React Hooks  في الموقع الرسمي لمنصة React.