我在快速单击时遇到了使用react-spring的问题：
警告：无法对已卸载的组件执行React状态更新。这是一个no-op，但它表示应用程序中存在内存泄漏。要修复此问题，请取消useEffect清理函数中的所有订阅和异步任务。
下面是我发现的一个示例沙盒，它也有同样的问题。如果您快速单击“单击此处”，您将看到我面临的相同问题。
https://codesandbox.io/s/greeting-card-with-react-spring-f2vr0?from-嵌入
Sandbox来自此博客：
https://blog.logrocket.com/animations-with-react-spring/
假设我遗漏了一些愚蠢的东西，但不知道这是否是react-spring的问题，因为它与useEffect有关。
您正在使用三元，因此组件被卸载。
如果greetingStatus为true，则不渲染任何内容。还始终渲染动画div（因为您将不透明度切换为1或0）
代码的工作副本在沙箱中
代码片段
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);
