由于“InvalidCharacterError：字符串包含无效字符”，从基于 React 的 GatsbyJS 中的主题 UI 插件导入的 useColorMode 不起作用

Question

• 我正在使用@smakosh的GatsbyJS主题和Theme UI插件；
• 我从Hooks - useThemeUI and useColorMode学会了使用Hooks的useColorMode；
• 我的整个代码完全正确；
• 我已经清除了 GatsbyJS、npm 和浏览器的缓存，但同样的错误仍然存​​在；
• 你可以拿我的小包来分析：https://drive.google.com/file/d/1SsgPXAq9zMv8Yp4XDjy3MJLeWun-J3UQ/view?usp=sharing。

编译后收到两个错误：

• TypeError: setMode is not a function;
• InvalidCharacterError: String contains an invalid character:

检查我的整个代码：

/** @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

Answer 1

查看您提供的文档链接，useThemeUI 挂钩返回值似乎包含 theme、components、colorMode 和 setColorMode 属性。您可以使用该钩子而不是 useColorMode 钩子。并将您的mode 和setMode 变量分别更改为colorMode 和setColorMode。这可以解决 “setMode 不是函数” 问题，同时仍然允许您访问主题属性。

同样的setMode 问题可能是您遇到的invalidCharacterError 的根本原因。因此，解决该问题也可能导致此错误消失。否则请查看您应该使用的字符集。这些天最常见的是utf8。如果您的应用程序包含变音符号、变音符号、象形文字等，您可能必须为该用例使用适当的字符集。

还要验证setTheme 是useThemeUI 挂钩返回值的有效属性。很像setMode，您提供的文档中没有提到它。它可能不存在。