React调用setState后状态不更新：点击汉堡菜单实现导航动画异常

你的代码存在几处语法和逻辑错误，修正后就能正常触发动画更新：

错误点说明 #

• 更新state时未使用动态键名：你写的{link: {animation: xxx}}实际是给state新增了一个固定名为link的属性，而非将循环变量link的值作为属性名，需要写成{[link]: {animation: xxx}}才能正确匹配style1/style2等key
• 清除动画的逻辑错误：你写的{...prevState, animation: ''}是给根state新增了一个名为animation的属性，没有修改每个style下的animation值
• 循环内多次调用setState会被React合并，反而会丢失更新，应该先计算出完整的新state，再一次性调用setAnimations更新
• setState是异步更新API，调用后立刻打印state拿到的永远是旧值，不代表state没更新
• useRef返回的是一个包裹对象，需要通过.current属性才能访问到绑定的DOM元素，不能直接操作ref变量本身

修正后完整代码 #

import React from 'react'
import {useRef, useState} from 'react';

const Navbar = () => {
  const [animations, setAnimations] = useState({
    style1:{animation:null},
    style2:{animation:null},
    style3:{animation:null},
    style4:{animation:null}
  }) 

  const burger = useRef(null)
  const nav = useRef(null)

  function HandleBurger(){
    // 操作DOM要通过ref.current访问
    nav.current.classList.toggle('nav-active');
    burger.current.classList.toggle('toggle')

    // 先计算完整的新state再一次性更新
    const newAnimations = {...animations}
    Object.keys(animations).forEach((link, index) => {
      if (newAnimations[link].animation) {
        newAnimations[link].animation = ''
      } else {
        newAnimations[link].animation = `navLinkFade 0.5s ease forwards ${index / 7 + 1}s`
      }            
    })
    // 一次性更新state
    setAnimations(newAnimations)
  }
  
  return (
    <nav className="navbar">
      <div className="logo">
        <h3 id="art">BURJTECH</h3>
        <h3 id="scope">LIMITED</h3>
      </div>
      {/* ref绑定正确写法 */}
      <div className="side-header" ref={nav}>
        <li style={animations["style1"]}><a className="cool-link" href="/">Homepage</a></li>
        <li style={animations["style2"]}><a className="cool-link" href="/about">About</a></li>
        <li style={animations["style3"]}><a className="cool-link" href="/services">Services</a></li>
        <li style={animations["style4"]}><a className="cool-link" href="/contact">Contact</a></li>
      </div>
      {/* ref绑定正确写法 */}
      <div className="burger" ref={burger} onClick={HandleBurger}>
        <div className="line1"></div>
        <div className="line2"></div>
        <div className="line3"></div>
      </div>
    </nav>
  )
}

export default Navbar

内容的提问来源于stack exchange，提问作者Preshy Jones