在没有 React Dev Tools 的情况下使用 setState

Question

We have $r available when React Dev Tool extension is installed. Is it possible to have something like that without using React Dev Tool?

eg

With $r this works:

$r.setState((state) => {
    return {username: "blabla"}
})

I need to do something like that but without the react dev tools.

Answer 1

Ok I was able to do it finally myself with help from Access third party React app state from outside React

Modified code from that answer here to change the state as well:

function setAppState(rootNode, globalAttributeName, newValue) {
    var $root = $(rootNode)._reactRootContainer;
    var reactState = false;
    var searchStack = [];
    var searched = [];

    // Fetch the "_internalRoot" attribute from the DOM node.
    for ( const key in $root ) {
        if (0 === key.indexOf('_internalRoot') ) {
            searchStack.push($root[key]);
            break;
        }
    }

    // Find the state by examining the object structure.
    while (searchStack.length) {
        var obj = searchStack.pop();

        if (obj && typeof obj == 'object' && -1 === searched.indexOf(obj)) {
            if ( undefined !== obj[ globalAttributeName ] ) {
                reactState = obj;
                break;
            }

            for (i in obj) {
                searchStack.push(obj[i]);
            }
            searched.push(obj);
        }
    }

    // Take the last pushed object as it contains the State to be changed
    state = searched[searched.length - 1].memoizedState;
    state[globalAttributeName] = newValue;

    return state;

}

rootNode will be the id of the root element of react app eg #app

globalAttributeName will be the Key that you need to change

newValue will be the new state of that key