Gatsby不使用react钩子更改状态

Question

我为我的gatsby站点创建了一个组件。我想为它写一个简单的切换功能：

import React, { useState } from "react"
import './css/header.css'

function clicker(state) {
   console.log(state);
}

const header = () => {

const [isExpanded, toggleExpansion] = useState(false)

return (

    <div>
        <nav className="main-nav">
            <div className={'container container-wide'}>

                {/* responsive toggle */}
                <div className="block lg:hidden">
                    <button onClick={() => clicker(!isExpanded)}
                        className="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
                        <svg className="fill-current h-3 w-3" viewBox="0 0 20 20"
                            xmlns="http://www.w3.org/2000/svg"><title>Menu</title>
                            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
                        </svg>
                    </button>
                </div>

                {/* Main Menu*/}
                <div className={`${isExpanded ? `block` : `hidden`} w-full lg:flex lg:items-center lg:w-auto justify-end`}  >
                    <div className="text-sm lg:flex-grow">
                        <a href="#responsive-header"
                            className="block mt-4 lg:inline-block lg:mt-0 text-teal-lightest hover:text-white mx-6">
                            Docs
                            </a>
                        <a href="#responsive-header"
                            className="block mt-4 lg:inline-block lg:mt-0 text-teal-lightest hover:text-white mx-6">
                            Examples
                            </a>
                        <a href="#responsive-header"
                            className="block mt-4 lg:inline-block lg:mt-0 text-teal-lightest hover:text-white mx-6">
                            Blog
                            </a>
                    </div>
                </div>
            </div>
        </nav>
    </div>
)

}

导出默认表头；

问题是:国家似乎就在那里。当我点击链接时，clicker( state )函数返回，不管初始状态是什么。

但是toggleExpansion函数不能简单地工作，也不能触发。或者..。组件不会根据新状态呈现。

我不知道。有人能帮帮忙吗？

当我使用一个类组件时，它工作得很好--有人能告诉我为什么吗？

Answer 1

首先，您应该按照React Docs中的建议将组件的名称大写。第二件事是您应该将事件处理程序逻辑移到头组件中，因为它属于该组件。为了触发状态更改，请修复事件处理程序中的代码，如以下代码所示。

从您的代码中，我还看到您可能还遗漏了关于React Hooks的另一个重要概念。请注意，在任何特定的呈现中，道具和状态永远保持不变，并且每个呈现都有自己的事件处理程序。您的事件处理程序只关闭‘see’ or ‘over(参见闭包)’，并为其特定的呈现设置状态和道具的值。因此，控制台记录事件处理程序中的状态将始终为您提供特定呈现的状态。对setToggleExpansion的调用只会使用更新后的状态和它自己的事件处理程序再次调用函数组件。

希望这能有所帮助。

const Header = () => {

  const [isExpanded, setToggleExpansion] = useState(false)

  // event handler
  function clicker() {
   console.log(isExpanded);            // logs false for the initial render
   setToggleExpansion(prev => !prev);
   console.log(isExpanded);            // logs false for the initial render
  }

  return (
    <button onClick={clicker}
     //...
    </button>
  )
}

Answer 2

首先，组件名称应该以大写字母开头，如React recommended，只需将其更改为Header即可

第二，更改切换函数，如下所示：

const Header = () => {
  const [isExpanded, toggleExpansion] = useState(false)

  return (
    <button onClick={() => toggleExpansion(!isExpanded)}
     //...
    </button>
  )
}

要使用它，只需像这样使用&& logical operator：

{ 
   isExpanded && ( <div> ... </div> ) 
}

​

​