DOM 元素不会在响应 spring 动画时被移除

Question

我正在编写教程，在 Checkout.js 组件处理的结帐页面上添加 React spring 转换后我遇到了问题。

我的问题发生在从购物篮中删除项目时，即使数组通过 reducer 删除了元素，购物篮中的最后一项也永远不会从 DOM 中删除。

在向下面的结帐组件添加过渡和 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-types

DOM 元素不会在响应 spring 动画时被移除

DOM element won't get removed on react spring animation

reactjs

react-spring