0
  • 我正在使用@smakosh的 GatsbyJS 主题和Theme UI插件；
  • 我useColorMode从Hooks 中学会了使用Hooks -useThemeUI和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
4

1 回答 1

1

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

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

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

于 2020-08-28T00:52:03.430 回答