调用 setState 时我的 React 状态不会更新

Question

当点击burger元素时，我正在尝试制作一个简单的动画

当点击汉堡时，我试图用动画更新以下状态，但无论我尝试什么，状态都不会更新。

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

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

let burger = useRef(null)
let nav = useRef(null)
function HandleBurger(){
nav.classList.toggle('nav-active');
Object.keys(animations).forEach((link, index) => {
if (animations[link].animation) {
setAnimations(prevState =>{
return  {...prevState,  animation: ''}
});
} else {
setAnimations(prevState =>{
return  {link: {animation: `navLinkFade 0.5s ease forwards ${index / 7 + 1}s`}}
});
console.log(animations);
}            
})          
burger.classList.toggle('toggle') 
}

return (
<nav className="navbar">
<div className="logo">
<h3 id="art">BURJTECH</h3>
<h3 id="scope">LIMITED</h3>
</div>
<div className="side-header" ref={el=>nav=el}>
<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>
<div className="burger" ref={el=>burger=el} onClick={HandleBurger}>
<div className="line1"></div>
<div className="line2"></div>
<div className="line3"></div>
</div>
</nav>
)
}

编辑：有人建议我张贴完整的代码

Answer 1

代码中有很多臭味。可以进行的第一个改进是使用单个setState调用，而不是在循环中调用它：

function HandleBurger() {
//...
setAnimations(state => {
return Object.keys(state).reduce((acc,key,index) => {
if(state[key].animation) return {...acc,[key]:animation:null};
return {...acc,[key]:animation: `navLinkFade ....`}
},state);
});
//...
}

你也不应该使用refs来切换类名，这不是做事情的反应方式。我真的很想看看你们其余的部分。

张贴。