इसलिए मैं Chrome एक्सटेंशन के लिए स्थानीय संग्रहण से कुछ डेटा लोड करने का प्रयास कर रहा हूं। मुझे उपयोगस्टेट हुक के प्रारंभिक मान को सेट करने के लिए इस डेटा का उपयोग करने की आवश्यकता है। यहाँ मैंने अभी तक क्या प्रयास किया है:

const Popup = (): ReactElement => {
    // load state from local storage
    let overviewIsOpenLS;
    useLayoutEffect(() => {
        chrome.runtime.sendMessage({ getFromLocalStorage: 'overviewIsOpen' }, response => {
            overviewIsOpenLS = response;
        });
    }, []);

    console.log(overviewIsOpenLS); // returns undefined

    // trying to use the value of overviewIsOpenLS as the initial value of this useState
    const [overviewIsOpen, setOverviewIsOpen] = useState<boolean>(overviewIsOpenLS);

    return <>...
}

मैंने स्थानीय भंडारण में मूल्य को डबल/ट्रिपल चेक किया, यह सही है। हालांकि, शीर्ष पर उपयोग प्रभाव इस बिंदु पर काम नहीं करता है और चर अपरिभाषित रहता है। कोई विचार यह कैसे हासिल किया जा सकता है?

0
erol_smsr 18 फरवरी 2021, 00:59

1 उत्तर

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

मैं मूल घटक में एसिंक्रोनस अनुरोध करता हूं, फिर अनुरोध समाप्त होने के बाद सशर्त रूप से बच्चे (Popup) को प्रस्तुत करता हूं:

// parent component
const [overviewIsOpenLS, setOverviewIsOpenLS] = useState();
useLayoutEffect(() => {
    chrome.runtime.sendMessage({ getFromLocalStorage: 'overviewIsOpen' }, setOverviewIsOpenLS);
}, []);
return overviewIsOpenLS === undefined ? null : <Popup overviewIsOpenLS={overviewIsOpenLS} />;
// then in Popup:
const [overviewIsOpen, setOverviewIsOpen] = useState<boolean>(props.overviewIsOpenLS);
1
CertainPerformance 18 फरवरी 2021, 01:03
मैं इस एक घटक पर इतना संकीर्ण ध्यान केंद्रित कर रहा हूं, मैं भूल गया कि मेरे पास मूल घटक था। धन्यवाद, यह मदद करता है।
 – 
erol_smsr
18 फरवरी 2021, 01:05