在执行 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);