Question

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

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

因此，在控制台上，我可以看到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是一个用于演示的沙盒示例。

useState不会更新值，并且值keep保持为空

2 个答案: