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

【问题标题】：My React state doesn't update when setState is called调用 setState 时，我的 React 状态不会更新
【发布时间】：2021-05-22 01:06:13
【问题描述】：

我正在尝试在单击汉堡元素时制作一个简单的动画

我正在尝试在单击汉堡时使用动画更新以下状态，但无论我尝试什么状态都不会更新。

 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>
  )
}

编辑：有人建议我发布完整代码

【问题讨论】：

您不应该在循环中设置状态。但除此之外，你怎么知道你的状态没有更新？
这似乎是一种处理css动画的非常复杂的方式。您可以通过切换元素的类名来完成同样的事情，然后从外部 css 文件中相应地应用动画。
@Adam 我跑了一个console.log来检查，每个循环的值都保持为空
setState 是异步的。因此，您的状态正在更新，但是因为您在 setState 之后有 console.log，所以它不会显示在日志中。将 setState 移动到 useEffect 中，并将您的状态值作为其数组依赖项，您将能够在控制台日志中看到状态更改。
@PreshyJones 除了其他评论员所说的，这是正确的，你在这里没有以一种非常反应的方式做事（当你以一种非反应的方式做反应时，它让反应看起来很困难），看看这个：stackoverflow.com/questions/30782948/…

标签： javascript reactjs react-redux react-hooks use-state

【解决方案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 来切换类名，这不是反应的做事方式。我真的很想看看你们其他的组件。

张贴。

【讨论】：