在執行 useState 之前設置 useState 鈎子的初始值

Question

因此，我正在嘗試從本地存儲中為 Chrome 擴展加載一些數據。 我需要使用這些數據來設置 useState 掛鈎的初始值。 這是我到目前為止所嘗試的：

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 <>...
}

我兩次/三次檢查了本地存儲中的值，它是正確的。 但是，此時頂部的 useEffect 不起作用，變量仍未定義。 知道如何實現嗎？

Answer 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);