反应 Spring "Can't perform a React state update on an unmounted component"

Question

我已经 运行 在快速点击时使用 React spring：

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

这是我发现的一个示例沙箱，它存在同样的问题。如果您快速单击 "click here"，您将看到我面临的相同问题。

https://codesandbox.io/s/greeting-card-with-react-spring-f2vr0?from-embed

沙箱来自这个博客：

https://blog.logrocket.com/animations-with-react-spring/

假设我遗漏了一些愚蠢的东西，但想知道这是否是 react-spring 的问题，因为它与 useEffect 有关。

Answer 1

您正在使用三元，因此组件已卸载。

如果 greetingStatus 为真，则不渲染任何内容。也总是渲染你的动画 div （因为你用 1 或 0 切换不透明度）

Working copy of your code is here in sandbox

代码片段

import React from "react";
import ReactDOM from "react-dom";
import { useSpring, animated as a } from "react-spring";

import "./styles.css";

const App = () => {
  const [greetingStatus, displayGreeting] = React.useState(false);
  const contentProps = useSpring({
    opacity: greetingStatus ? 1 : 0,
    marginTop: greetingStatus ? 0 : -500,
    position: "absolute"
  });
  return (
    <div className="container">
      <div className="button-container">
        <button onClick={() => displayGreeting(a => !a)} className="button">
          Click Here
        </button>
      </div>
      {!greetingStatus ? <div className="Intro">Click button below</div> : null}
      <a.div className="box" style={contentProps}>
        <h1>Hey there ! React Spring is awesome.</h1>
      </a.div>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);