Javascript 使用从基于React的GatsbyJS中的主题UI插件导入的ColorMode'；“由于”而无法工作；InvalidCharacterError:字符串包含无效字符； 我使用的是盖茨比的主题和插件 我学会了使用Hooks'useColorModefrom 我的代码完全正确 我已经清除了GatsbyJS、npm和browser的缓存，但同样的错误仍然存在 你可以把我的小包裹拿来

编译后，我收到两个错误：

• TypeError:setMode不是一个函数

• InvalidCharacterError:字符串包含无效字符

  ：

检查我的全部代码：

/** @jsx jsx */

import { jsx, Styled, useColorMode } from 'theme-ui'
import { Context } from '../../common'
import SelectLanguage from './SelectLanguage'
import { Navegador, Input, Label, Submenu, StyledHeader } from './styles'

function Header() 
{
  const themes = ['deep', 'funk', 'future', 'swiss'];
  const modes = ['default', 'dark'];
  const [mode, setMode, setTheme, theme] = useColorMode()
  
  return (

    <Styled.root>
      <Context.Consumer>
        {({ toggleLanguage, lang }) => (
          <StyledHeader>
            <Navegador id="menu">
              <li>
                  <SelectLanguage lang={lang} toggleLanguage={toggleLanguage} />
              </li>

              <li>
                <Input id="modes" type="checkbox" name="menu"/>
                <Label for="modes">Modes</Label>
                <Submenu className="submenu">
                  <li onClick={e => setMode("default")}> Light </li>
                  <li onClick={e => setMode("dark")}> Dark </li>
                </Submenu>
              </li>

              <li>
                <Input id="themes" type="checkbox" name="menu"/>
                <Label for="themes">Themes</Label>
                <Submenu className="submenu">
                  <li onClick={e => setTheme("deep")}> Deep </li>
                  <li onClick={e => setTheme("funk")}> Funk </li>
                  <li onClick={e => setTheme("future")}> Futuristic </li>
                  <li onClick={e => setTheme("swiss")}> Swiss </li>
                </Submenu>
              </li>
              
            </Navegador>
          </StyledHeader>
        )}
      </Context.Consumer>
    </Styled.root>
  )
}

export default Header

/**@jsx-jsx*/
从“主题ui”导入{jsx，已设置样式，使用ColorMode}
从“../../common”导入{Context}
从“./SelectLanguage”导入SelectLanguage
从“./styles”导入{Navegador，输入，标签，子菜单，StyledHeader}
函数头（）
{
const-themes=['deep'，'funk'，'future'，'swiss']；
常量模式=[“默认”，“暗”]；
const[mode，setMode，setTheme，theme]=useColorMode（）
返回(
{（{toggleLanguage，lang}）=>(



模式
setMode（“默认”）}>Light
setMode（“暗”）}>dark


主题
setTheme（“deep”）}>deep
setTheme（“funk”）}>funk
未来派
setTheme（“瑞士”）}>swiss

)}
)
}
导出默认标题

查看您提供的doumentation链接，

useThemeUI

挂钩返回值似乎包含

主题

、

组件

、

颜色模式

和

设置颜色模式

属性。您可以使用该钩子而不是

useColorMode

hook。并将

模式

和

设置模式

变量分别更改为

颜色模式

和

设置颜色模式

。这可以解决“setMode不是函数”的问题，同时仍然允许您访问theme属性

相同的

setMode

问题可能是导致出现此

invalidCharacterError

错误的根本原因。因此，解决该问题也可能导致此错误消失。否则，请查看您应该使用的字符集。现在最常见的是utf8。如果您的应用程序包含变音符号、变音符号、象形文字e.t.c.，那么您可能必须为该用例使用适当的字符集

---

还要验证

setTheme

是否是

useThemeUI

hook返回值的有效属性。与

setMode

非常相似，您提供的文档中没有提到它。它可能不存在。

我为我的缺席和我的错误感到非常抱歉。我犯了一个错误，因为我忘了更新文件链接，因为该网站的共享链接已过期。我切换到谷歌驱动。请再次检查链接。实际上，

setColorMode

和

setMode

是变量。一个用于颜色切换，另一个用于黑暗和光明模式。不用担心，你能把它加载到codesandbox.io吗？如果需要的话，通过这种方式进行复制和调试会更容易。就是这样。应用程序没有加载。Codesandbox产生此错误：“无法获取依赖项，请在几秒钟后重试：无法读取未定义的属性“name”。你知道它们可能是哪些依赖项吗？我选择了错误的沙盒，因为它是基于反应的。我用叉子叉了盖茨比沙箱，它成功了。奇怪的是，它在CodeSandbox上工作，因为它显示它是

setTheme

。你是对的。我将

setTheme

更改为

setMode

。成功了。但它在本地不起作用，它给出了相同的错误。我留给你一份礼物。我认为你最好在本地测试和发现。