Reactjs 使用react transition group在不触发动画的情况下更改项目的关键点

我正在构建一个UI，其中有一个项目列表。当用户添加一个项目时，它会发送一个API请求来创建一个新项目，但它也会使用一个临时ID将该项目添加到列表中。一旦API返回，它会用来自后端的实际ID替换该项目的ID。问题是，当我更改列表中项目的关键点时，react transition group会将其视为删除/添加并触发动画

const [items, setItems] = useState([
  { key: uuid(), id:'temporal id', name: 'name' },
  ...
]);

---

我的问题是：如何告诉react transition group新ID属于旧项，这样它就不会触发更新？

我对react transition group不太熟悉，但我与其他库进行了转换。我想你现在用身份证当钥匙了。我将向数组中的对象添加一个键字段。密钥应该是唯一的。您可以通过多种方式使其唯一，例如使用计数器或uuid。我喜欢uuid。这样，如果将临时id更改为最终id，并且关键点保持不变，则不会出现动画

const [items, setItems] = useState([
  { key: uuid(), id:'temporal id', name: 'name' },
  ...
]);

在转换中使用键，而不是id

<TransitionGroup className="todo-list">
  {items.map(({ key, name }) => (
    <CSSTransition
      key={key}
      timeout={500}
      classNames="item"
    >

{items.map（{key，name}）=>(

如果您提供……至少提供一些代码以及如何使用代码等……帮助他人，帮助您。我希望有一种方法可以做到这一点，而不必跟踪所有ID，但这似乎是唯一的方法。