时间戳

首页 > 解决方案 > 盖茨比不使用反应钩子改变状态

reactjs - 盖茨比不使用反应钩子改变状态

问题描述

我为我的 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 函数并不能简单地工作或触发。或者......组件没有根据新状态呈现......

我不知道。有人可以帮忙吗？

当我使用类组件时它工作正常 - 有人可以告诉我为什么吗？

标签： reactjsreact-hooksgatsbytailwind-css

解决方案

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

从您的代码中，我还看到您可能还遗漏了有关 React Hooks 的另一个重要概念。请注意，在任何特定的渲染中，道具和状态永远保持不变，并且每个渲染都有自己的事件处理程序。您的事件处理程序仅“查看” 或“关闭（查看闭包）”特定渲染的 state 和 props 的值。因此，控制台在事件处理程序中记录状态将始终为您提供特定渲染的状态。对 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>
  )
}

推荐阅读