useEffect 更改所需的变量但没有效果 React

Question

import React, { useState, useEffect } from "react";
import { motion } from "framer-motion";
import { colors } from "./components/Animations";

export const tick_cross_animation = {
  hidden: {
    opacity: 0,
    pathLength: 0,
  },
  show: {
    opacity: 1,
    pathLength: 1,
    transition: { duration: 1.25 },
  },
};
const Work = ({ check, setcheck, cross, setcross }) => {
  const [circle_Check, setcircle_Check] = useState(Infinity);
  const circleanimation = {
    hidden: {
      opacity: 0,
      pathLength: 0,
      translateX: 5,
      translateY: 5,
      rotate: -180,
    },
    show: {
      opacity: 1,
      pathLength: 1,

      transition: {
        duration: 1.5,
        yoyo: circle_Check,
      },
    },
  };
  setTimeout(() => {
    setcheck(true);
  }, 1250);

  useEffect(() => {
    if (check || cross === true) {
      setcircle_Check(0);
    } else {
      setcircle_Check(Infinity);
    }
    console.log(
      "Here it is changing but not  " + circle_Check
    );
  }, [check, cross]);

  setTimeout(() => {
    setcross(true);
  }, 3000);
  return (
    <div
      className="wow"
      style={{
        width: "80%",
        margin: "auto",
        height: "20rem",
      }}
    >
      <svg className="progress-icon" viewBox="0 0 200 200">
        <motion.path
          fill="none"
          strokeWidth="2"
          stroke={colors.color_circle}
          d="M 0, 20 a 20, 20 0 1,0 40,0 a 20, 20 0 1,0 -40,0"
          variants={circleanimation}
          initial="hidden"
          animate="show"
        />
        {check && (
          <motion.path
            fill="none"
            strokeWidth="2"
            stroke={colors.color_tick}
            d="M14,26 L 22,33 L 35,16"
            variants={tick_cross_animation}
            initial="hidden"
            animate="show"
          />
        )}
        {cross && (
          <motion.path
            fill="none"
            strokeWidth="2"
            stroke={colors.color_X}
            d="M17,17 L33,33 M33,17 L17,33"
            variants={tick_cross_animation}
            initial="hidden"
            animate="show"
          />
        )}
      </svg>
    </div>
  );
};

export default Work;

这需要与 show 属性中的 circleanimation同步。 我正在使用 2 个 useStates 来检查和 1 个 useEffect。现在，当 useEffect 运行代码时会更改值，但 yoyo 效果会无限期地继续发生。我希望它与动画一起工作，这样它就不会像 possibel 那样持续太久。 The values do change

Answer 1

您的console.log 将始终返回与当前值完全相反的值，因为setState 是异步的。也许你依赖这个，只是你有错误的值，你认为它应该被禁用，但你只是启用了它？

如果您想记录正确的值，请使用：

useEffect(() => {
  setcircle_Check((check || cross === true) ? 0 : Infinity);
}, [check, cross]);

useEffect(() => {
  console.log("Here it is changing but not  " + circle_Check);
}, [circle_Check]);

您的超时也会在每次重新渲染时被调用。将它们放入效果中：

useEffect(() => {
  setTimeout(() => {
    setcheck(true);
  }, 1250);

  setTimeout(() => {
    setcross(true);
  }, 3000);
}, []);