将 react-spring useSprings 与动态项目数组一起使用

Posted 2023-03-07

【中文标题】将 react-spring useSprings 与动态项目数组一起使用

【英文标题】：Using react-spring useSprings with dynamic items array

【发布时间】：2019-10-14 06:49:20

【问题描述】：

我正在尝试使用 react-spring 的 useSprings 使用户能够以 formik FieldArray 重新排序项目。 useSprings Draggable List 演示 (found here) 使用 useRef 来管理项目的顺序。 FieldArray 带有许多用于插入、删除和移动项目的数组辅助函数。

我遇到的问题是：

1) 使用 formik 的 move 数组辅助方法重新排序现有项目成功更改数组顺序，但需要额外单击才能呈现正确的顺序

2) 使用数组辅助方法添加或删除数组项会产生意想不到的结果。改变 ref 的长度不会改变 order.current 内部 useGesture 的长度

我也尝试过使用useState 而不是useRef 并在道具更改时使用useEffect 更新状态。

这是我制作的代码沙箱：https://codesandbox.io/s/usesprings-with-fieldarray-56bex

在bind函数中，注释掉

order.current = newOrder;

并取消注释

// arrayHelpers.move(currIndex, currRow);

显示了我上面提到的问题 #1。

我希望能够将 formik 的 move、insert 和 remove 辅助函数与 react-spring 一起使用，以无缝地重新排序、添加和删除 FieldArray 中的项目。

【问题讨论】：

嘿！你设法解决了这个问题吗？

【参考方案1】：

也许你可以在添加新元素后尝试设置新的 order.current

  onClick=() =>
          arrayHelpers.insert(items.length, 
            name: `Item $items.length + 1`
          )
          order.current = [...order.current, order.current.length];
        
      

这将在列表末尾添加新项目。

【参考方案2】：

我至少遇到了你的 #1 问题。

请注意，setSprings 函数不会自行重新渲染任何内容，并且 useSprings 缺少要自动更新的 dependencies 数组。

[e-mail]-23 有一个依赖数组，并与链接到here 的沙箱中的useSpringsFixed 包装器一起，它应该强制重新渲染更改的道具。

希望对您的问题也有帮助。

【讨论】：

感谢您的回答。我现在正在关注您在 Github 上打开的问题。