क्या किसी शर्त के अंदर रिएक्ट हुक कॉल का उपयोग करना गलत है?

मुझे पता है कि एक सशर्त ब्लॉक के अंदर इसका उपयोग करना गलत है, क्योंकि यह कॉल के क्रम में गड़बड़ी करेगा, और लिंटर मुझे इसके बारे में चेतावनी देता है।

import {useRouteMatch} from 'react-router-dom';

if (condition) {
  useRouteMatch("/blog/:slug");   //  <---- THIS IS WRONG AND IT BREAKS HOOK's RULES
}

लेकिन यह किसी चेतावनी को ट्रिगर नहीं करता है और ऐसा लगता है कि यह ठीक काम करता है:

import {useRouteMatch} from 'react-router-dom';

if (useRouteMatch("/blog/:slug")) {
  console.log("something");
}

यह किसी भी चेतावनी को ट्रिगर नहीं करता है और यह ठीक चलता है। मुझे पता है कि ज्यादातर बार condition के अंदर हुक को कॉल करने का कोई मतलब नहीं होगा, लेकिन इस मामले में ऐसा होता है, 'क्योंकि यह मूल रूप से एक सहायक कार्य है जो शायद कुछ Context.

प्रश्न

क्या यह किसी हुक का नियम तोड़ रहा है? क्या इसे करना ठीक है? क्या किसी if (condition) के अंदर होना शीर्ष-स्तर पर होने के रूप में गिना जाता है?

enter image description here

0
cbdeveloper 5 मई 2020, 20:53
यदि आपको इसकी स्थिति की आवश्यकता है या राज्य के आधार पर कुछ ऑपरेशन नहीं करना चाहिए तो आपको शायद उपयोग प्रभाव का उपयोग नहीं करना चाहिए। क्या आप सटीक कोड और वांछित व्यवहार पेस्ट कर सकते हैं?
 – 
Defoe
5 मई 2020, 20:56
1
ऐसा लगता है कि developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… (जहां यह एक्सप्रेशन का वर्णन करता है) और reactjs.org/docs/hooks-rules.html (जहां यह किसी भी कथन का वर्णन करता है जो निष्पादित हो भी सकता है और नहीं भी) मानक . में "हालत" की परिभाषा
 – 
Aprillion
5 मई 2020, 21:21
यही मुझे भ्रमित कर गया, मुझे लगता है।
 – 
cbdeveloper
5 मई 2020, 21:23

3 जवाब

सबसे बढ़िया उत्तर

दूसरा कोड स्निपेट हुक के नियमों का पालन करता है। यह हमेशा हुक को ठीक उतनी ही बार कॉल करेगा। व्यक्तिगत रूप से, मैं इसे स्पष्ट करने के लिए if कथन से पहले खींचूंगा, लेकिन यह सख्ती से जरूरी नहीं है।

const match = useRouteMatch("/blog/:slug");
if (match) {
  console.log("something");
}
3
Nicholas Tower 5 मई 2020, 20:56
मुझसे तेज @ टाइपिंग!
 – 
Sandra Willford
5 मई 2020, 20:58

कोड का यह टुकड़ा हुक के नियमों का उल्लंघन नहीं करता है क्योंकि हुक हमेशा उसी क्रम में चलेगा। हुक if कंडीशन के अंदर नहीं लिखा गया है, इसके बजाय useRouteMatch के रिटर्न वैल्यू के आधार पर हम कोड को if कंडीशन के अंदर एक्जीक्यूट कर रहे हैं।

import {useRouteMatch} from 'react-router-dom';

if (useRouteMatch("/blog/:slug")) {
  console.log("something");
}

यह कोड इसके बराबर है:

import {useRouteMatch} from 'react-router-dom';

const isMatch = useRouteMatch("/blog/:slug");

if (isMatch) {
  console.log("something");
}
3
Jagrati 5 मई 2020, 20:59

एक चर को हुक असाइन करना सबसे अच्छा और अधिक स्पष्ट हो सकता है।

const routeMatch = useRouteMatch("/blog/:slug");

if (routeMatch) {
   // do something
}
2
Sandra Willford 5 मई 2020, 20:58