不可能的错误……并发问题？ NextJs / 节点 HTTP 服务器

Question

I am having a problem that is supposed not to happen:

See initialUserState is being set depending on the result of a ternary operation. However, this operation should return false here (as there's no user property in context object. (You can see it in the debugger below)

What could be possibly going on here?

The data is from a previous request in a NextJS application (I am using Firefox and Firefox Private mode). This only happens when the request are quick next to each other. So I think this is a concurrency issue, but can't understand why javascript would fail with that condition. How initialUserState is holding that value if I am declaring it again here.

import {userInitialState} from "./UserContext";
import {listInitialState} from "./ListContext";
import {createContext, useState} from "react";

/**
 * Sets the initial application context
 */
export default class ApplicationContext {

    userContext;
    listContext;

    /**
     * Will set the initial application state.
     * @param context
     */
    constructor(context) {
        let initialUserState = context.hasOwnProperty('user') ? context.user : userInitialState;
        const userContextUpdater = () => {
            let [state, setState] = useState({...initialUserState})
            return [state, setState];
        }
        this.userContext = createContext(userContextUpdater);

        let initialListState = context.hasOwnProperty('list') ? context.list : listInitialState;
        const listContextUpdater = () => {
            let [state, setState] = useState({...initialListState})
            return [state, setState];
        }
        this.listContext = createContext(listContextUpdater);
    }

    /**
     * Returns the UserContext
     * @returns {*}
     */
    getUserContext = () => {
        return this.userContext;
    }

    /**
     * Returns the List context
     * @returns {*}
     */
    getListContext = () => {
        return this.listContext;
    }
}

_app.js

import ApplicationContext from "../lib/Context/ApplicationContext";
import {useContext} from "react";

export default function RankerApp({Component, pageProps}) {
    const applicationContext = new ApplicationContext(pageProps);
    const ListContext = applicationContext.getListContext();
    const UserContext = applicationContext.getUserContext();

    const [listState, setListState] = useContext(ListContext)();
    const [userState, setUserState] = useContext(UserContext)();

    return (
        <ListContext.Provider value={[listState, setListState]}>
            <UserContext.Provider value={[userState, setUserState]}>
                <Component {...pageProps} applicationContext={applicationContext}/>
            </UserContext.Provider>
        </ListContext.Provider>
    );
}

UserContext.js

export const userInitialState = {
    currentUserId: undefined,
    users: {},
}

This is driving me nuts, it looks like it is some kind of concurrency issue, I can't explain it otherwise, as this doesn't happen if the request are spaced in time

Answer 1

It seems I got bitten by object references.

This was before:

This is the fix

So here I assigned to the returnContext['user'] a reference to userInitialState

And then modified it right below.

Since for some reason my NextJS app is persisting things (I don't know if this is because of being a compiled server, but the variables inside Pages remain if I put a counter), this value was also persisting.