मैं अपना पहला कस्टम हुक बना रहा हूं। मैं चाहता हूं कि हुक deviceType लौटाए जो कि हुक में Promise का परिणाम है।

हुक:

export default function useDeviceType() {
  // Finds the user's device type and sets the
  // screen orientation appropriately.
  useEffect(() => {
    getDeviceTypeAsync().then((deviceType) => {
      const orientationPromise = setScreenOrientation(deviceType);
      return deviceType
    });
  }, []);
}

हुक का उपयोग:

export default function DevelopmentScreen() {
  const deviceType = useDeviceType();
  console.log(deviceType)
  return null;
}

सांत्वना देना:

अपरिभाषित

मुझे useEffect हुक को समझने में कठिनाई हो सकती है, लेकिन मेरा मानना ​​है कि इसे यहां एक बार पूरी तरह से चलाना चाहिए।

क्या लौटाई जा रही वस्तु अभी भी अपरिभाषित है क्योंकि Promise का समाधान नहीं हुआ है? यदि ऐसा है, तो मैं deviceType को setScreenOrientation के अंदर कैसे उपयोग कर सकता हूं?

जब मैं console.log(deviceType) useEffect हुक के अंदर मुझे उचित प्रतिक्रिया मिलती है:

2

इसे समझने में मदद के लिए अग्रिम धन्यवाद!

अंतिम संपादित करें:

export default function useDeviceToSetOrientation() {
  const [orientation, setOrientation] = useState(null);
  useEffect(() => {
    getDeviceTypeAsync().then((type) => {
      const orientationPromise = setScreenOrientation(type);
      orientationPromise.then((data) => {
        setOrientation(data);
      })
    });
  }, []);
  return orientation
};

export default function DevelopmentScreen() {
  const orientation = useDeviceToSetOrientation();
  console.log(orientation)
  return null;
}

आउटपुट (सही):

4

0
David Alford 24 नवम्बर 2021, 22:42

1 उत्तर

सबसे बढ़िया उत्तर
export default function useDeviceType() {
  const [deviceType, setDeviceType] = useState();
  useEffect(() => {
    getDeviceTypeAsync().then((type) => {
      const orientationPromise = setScreenOrientation(type);
      setDeviceType(type);
    });
  }, []);
  return deviceType
}

इससे व्यवहार ठीक हो जाएगा और फिर deviceType तक const deviceType = useDeviceType(); के माध्यम से पहुंचा जा सकेगा।

ऐसा लगता है कि आप यहां गलत समझ रहे हैं कि useEffect से रिटर्निंग वैल्यू कैसे काम करती है। आप इसके बारे में यहां पढ़ सकते हैं, लेकिन हम वास्तव में इसका इस्तेमाल करते हैं क्लीनअप फंक्शन बनाने के लिए जो हमारे कंपोनेंट के अनमाउंट पर चलेंगे।

संपादित करें: आप React's docs में भी देख सकते हैं कि कैसे कस्टम हुक मान लौटाने वाले हैं।

2
Daniel Baldi 24 नवम्बर 2021, 22:52
1
स्पष्टीकरण और बाहरी संसाधनों के लिए धन्यवाद! मैं इस हुक को बनाने के लिए डॉक्स पढ़ रहा था, लेकिन इस पर थोड़ा और ध्यान देने की जरूरत है कि वे उन्हें कैसे बनाते हैं।
 – 
David Alford
24 नवम्बर 2021, 22:50
आपका स्वागत है! हुक पहली बार में थोड़े भारी होते हैं लेकिन वे वास्तव में एक शक्तिशाली उपकरण हैं। उन्हें समझने की कोशिश में कुछ समय समर्पित करने के लिए यह पूरी तरह से लायक है :)
 – 
Daniel Baldi
24 नवम्बर 2021, 22:55
2
शायद उस orientationPromise लाइन की कोई जरूरत नहीं है। यह थोड़ा फालतू लगता है। @DanielBaldi
 – 
Andy
24 नवम्बर 2021, 22:57
1
हां आप ठीक कह रहे हैं! हो सकता है कि ओपी सुगमता में सुधार करना चाहता हो या इसके साथ अधिक सहज महसूस करता हो। मैंने अभी मूल कोड कॉपी किया है और इसकी संरचना में बदलाव किए हैं!
 – 
Daniel Baldi
24 नवम्बर 2021, 23:01
1
ऐसा लगता है कि आपके कोड में screenOrientation और deviceType का मान समान होगा। मुझे नहीं पता कि आप इसे दो अलग-अलग राज्यों में क्यों विभाजित करेंगे, लेकिन आप return [screenOrientation, deviceType] या return {screenOrientation, deviceType} का उपयोग करके अपने कस्टम हुक में उन दोनों को वापस भी कर सकते हैं।
 – 
Daniel Baldi
24 नवम्बर 2021, 23:05