DOM 元素不会在反应弹簧动画中删除

Question

我正在编写一个教程，在checkout.js组件处理的签出页面上添加react spring transition后遇到了一个问题。

我的问题发生在从篮子中移除项目时，篮子上的最后一个项目从未从DOM中移除，即使数组通过reducer移除了元素。

在将转换和animated.div元素添加到下面的签出组件之前，这是按预期进行的。

import React from "react";
import "./Checkout.css";
import SubTotal from "./SubTotal";
import { useStateValue } from "../StateProvider";
import CheckoutProduct from "./CheckoutProduct";
import shortid from "shortid";
import { useTransition, animated } from "react-spring";
function Checkout() {
const [{ basket, user }] = useStateValue();
const getRandomKey = () => {
return shortid.generate();
};
// define transition behaviour
const transition = useTransition(basket, basket => basket.id, {
from: { opacity: 0, marginLeft: -100, marginRight: 100 },
enter: { opacity: 1, marginLeft: 0, marginRight: 0 }
});
return (
<div className="checkout">
<div className="checkout__left">
<img
className="checkout__ad"
src="https://images-na.ssl-images-amazon.com/images/G/02/UK_CCMP/TM/OCC_Amazon1._CB423492668.jpg"
alt=""
></img>
<div className="checkout__title">
<h3>Hello, {user?.email}</h3>
<h2>Your shopping basket</h2>
{transition.map(({ item, key, props }) => {
const keyNew = getRandomKey();
console.log(keyNew + "this is the new key");
return (
<animated.div
key={keyNew}
style={props}
className="checkout__product"
>
<CheckoutProduct
id={item.id}
image={item.image}
price={item.price}
rating={item.rating}
title={item.title}
/>
</animated.div>
);
})}
</div>
</div>
<div className="checkout__right">
<h2>SubTotal component</h2>
<SubTotal />
</div>
</div>
);
}
export default Checkout;

复制步骤：将任何产品添加到购物篮中点击购物篮图标进入结账屏幕并尝试删除项目

这是我正在编写的带有教程代码的github repo

这个问题需要我强制渲染吗？

感谢

解决方案：

根据Peter的回复，将react-spring依赖关系从8.0.27升级到9.0.0-rc.3。

并对组件进行了如下重构：

import React from "react";
import "./Checkout.css";
import SubTotal from "./SubTotal";
import { useStateValue } from "../StateProvider";
import CheckoutProduct from "./CheckoutProduct";
import shortid from "shortid";
import { useTransition, animated } from "react-spring";
function Checkout() {
const [{ basket, user }] = useStateValue();
const getRandomKey = () => {
return shortid.generate();
};
// define transition behaviour
const transition = useTransition(basket, {
from: { opacity: 0, marginLeft: -100, marginRight: 100 },
enter: { opacity: 1, marginLeft: 0, marginRight: 0 }
});
return (
<div className="checkout">
<div className="checkout__left">
<img
className="checkout__ad"
src="https://images-na.ssl-images-amazon.com/images/G/02/UK_CCMP/TM/OCC_Amazon1._CB423492668.jpg"
alt=""
></img>
<div className="checkout__title">
<h3>Hello, {user?.email}</h3>
<h2>Your shopping basket</h2>
{transition((props, item) => {
const keyNew = getRandomKey();
return (
<animated.div style={props}>
<CheckoutProduct
key={keyNew}
id={item.id}
image={item.image}
price={item.price}
rating={item.rating}
title={item.title}
/>
</animated.div>
);
})}
</div>
</div>
<div className="checkout__right">
<h2>SubTotal component</h2>
<SubTotal />
</div>
</div>
);
}
export default Checkout;

Answer 1

您尝试过使用原始密钥吗？如果你换了钥匙，可能会发生奇怪的事情。

{transition.map(({ item, key, props }) => {
return (
<animated.div
key={key}
style={props}
className="checkout__product"
>
....

更新：

还有一些关于转换的错误。尝试提高版本号。你可以试试9.0.0-beta.4左右或稍高一些。或者您可以尝试9.0.0-rc.3，但它有一个稍微不同的api。查看此处的文档：https://aleclarson.github.io/react-spring/v9/#Revamped-类型