useState 不更新值，值 keep 保持为空

Question

我正在使用 React 构建我的网站，并且我正在使用 useState 来获取悬停项目的 id。

但是当我使用 setState 获取值时，它不会更新并保持为“空”

所以在控制台上，我可以看到 event.target.id 被识别，但即使在 setState 事件之后，状态值也返回 null。

谁能提供一些关于这里发生了什么的线索？

这是代码

import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import styled from 'styled-components'



const WorksTitle = props => {
  const { type, title, imgSrc, link, year } = props
  const [currentMenu, setCurrentMenu] = React.useState(null)

  const handleHover = event => {
    console.log(
      'event target: ',
      event.target,
      ' / ',
      'event target id: ',
      event.target.id
    )
    **console.log(event.target.id)
    setCurrentMenu(event.target.id)
    console.log(currentMenu)**
  }

  const handleMouseOut = event => {
    console.log('mouse out from:', event.target.id)
    setCurrentMenu(null)
  }

  return (
    <StyledWorksTitle>
      <TitleItem id={title} onMouseOverCapture={handleHover} onMouseOut={handleMouseOut}>
        <div className={`itemWrapper ${(currentMenu === { title } ||
            currentMenu === null) && 'activated'}`}
          id={title}>
          <Link to={link}></Link>
        </div>
      </TitleItem>
    </StyledWorksTitle>
  )
}

/* styled-components */

export default WorksTitle

Answer 1

setState 是一个异步调用，这意味着 console.log 在它不会有更新的值之后立即。出于调试目的，请执行以下操作： 在 StyledWorksTitle 之后创建一个按钮并在其中写入如下：

   <button onClick={()=>console.log(currentMenu)}></button>

您现在应该可以看到更新后的值了。

至于如何处理它的实现。我建议使用 useEffect() 并将 currentMenu 状态作为其依赖项传递。

   useEffect(()=>{
    //write a function to push hovered item id into an array or something
   },currentMenu)

这是非常通用的，因为我不知道你想用这个 ID 做什么，但无论如何这会帮助你。

Answer 2

useState 是异步的，因此 currentMenu 直到下一次渲染才会更新。

Here 是一个用于演示的沙盒示例。