SolidJS SolidStart 上下文无效：如何设置初始上下文状态并在页面加载后更新上下文状态

Question

目前我正在每个页面中更新我的状态。

我应该在哪里初始化我的应用程序状态，以便该状态可以显示在我的应用程序的每个页面上？

在我的

app.tsx

还是在

entry-server.tsx

？

之后，我想在获取数据后更新状态...我无法在

const { state, setState } = useCartContext();

中使用

app.tsx

，因为它在那里包装我的上下文，并且我收到了

SolidStart Context is not valid

错误。

export default function App() {
    const { state, setState } = useCartContext();// <-- crashed my app

    onMount(async () => {
        console.log("onMount from App()");
        const initOut = await initializeState();
        setState({ ...initOut });
    });

    return (
        <CartContextProvider>
            <Router
                root={(props) => (
                    <>
                        <SidebarDesktop sidebarItems={sidebarItems} />
                        <Nav />
                        <Suspense>{props.children}</Suspense>
                    </>
                )}
            >
                <FileRoutes />
            </Router>
        </CartContextProvider>
    );
}

Answer 1

好吧，所以我想我应该通过

onMount

初始化我的上下文中的状态：

export const CartContextProvider: Component<CartContextProviderProps> = (
    props: CartContextProviderProps,
) => {
    const [state, setState] = createStore<StatesT>(default_state);
    onMount(async () => {
        ll("onMount from CartContextProvider()");
        const initOut = await initializeState();
        setState({ ...initOut });
    });
    return (
        <CartContext.Provider value={{ state, setState }}>
            {props.children}
        </CartContext.Provider>
    );
};

然后我的组件可以通过

Show

使用更新后的状态：

const { state, setState } = useCartContext();
return (<div>
    <Show when={state.account.length > 0} fallback={"Connect Account"}>
        {state.account}
    </Show>
</div>);