Question

我正在建立一个Laravel网站，并且已经开始将React纳入其中。作为建立暗模式切换的一部分，我在下面做了一个按钮。

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

function ModeToggle() {
    const [theme, setTheme] = useState(0);

    function setLocal(key, content) {
        return localStorage.setItem(`guide.${key}`, content);
    }

    function getLocal(key) {
        return localStorage.getItem(`guide.${key}`);
    };

    function toggleTheme() {
        let html = document.querySelector('html');

        switch (theme) {
            case 0: // From dynamic to light
                setTheme(1);
                setLocal('theme', 1);
                html.classList.remove('dynamic');
                break;
            case 1: // From light to dark
                setTheme(2);
                setLocal('theme', 2);
                html.classList.add('dark');
                break;
            case 2: // From light to dark
                setTheme(0);
                setLocal('theme', 0);
                html.classList.remove('dark');
                html.classList.add('dynamic');
                break;
        }
    }

    useEffect(() => {
        let html = document.querySelector('html');

        switch (getLocal('theme')) {
            case 0:
                html.classList.add('dynamic');
                break;
            case 1:
                setTheme(1);
                break;
            case 2:
                setTheme(2);
                html.classList.add('dark');
                break;
        }
    }, []);


    return (
        <a className="core-bar-action" href="#" onClick={() => toggleTheme()}>
            {theme === 0 && <i className="far fa-fw fa-eclipse" />}
            {theme === 1 && <i className="far fa-fw fa-sun" />}
            {theme === 2 && <i className="far fa-fw fa-moon" />}
        </a>
    );
}

export default ModeToggle;

if (document.getElementById('toggle-ui-mode')) {
    ReactDOM.render(<ModeToggle />, document.getElementById('toggle-ui-mode'));
}

它的基本作用是从localStorage中读取并存储主题，然后在它们之间进行切换。一切正常，但是，单击按钮将导致以下错误。

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at removeChild (http://localhost:8000/js/app.js:34803:18)
    at unmountHostComponents (http://localhost:8000/js/app.js:47651:9)
    at commitDeletion (http://localhost:8000/js/app.js:47702:5)
    at commitMutationEffects (http://localhost:8000/js/app.js:49984:11)
    at HTMLUnknownElement.callCallback (http://localhost:8000/js/app.js:27390:14)
    at Object.invokeGuardedCallbackDev (http://localhost:8000/js/app.js:27439:16)
    at invokeGuardedCallback (http://localhost:8000/js/app.js:27494:31)
    at commitRootImpl (http://localhost:8000/js/app.js:49711:9)
    at unstable_runWithPriority (http://localhost:8000/js/app.js:55226:12)
    at runWithPriority$1 (http://localhost:8000/js/app.js:38241:10)

我正在寻找解决方案，但找不到任何东西。除了引起此错误外，该按钮也将消失。

单击后，React不会重新渲染组件

0 个答案: