उपयोग के अंदर वादे से कैसे वापस आएं प्रभाव

मैं अपना पहला कस्टम हुक बना रहा हूं। मैं चाहता हूं कि हुक 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