Question

我正在尝试使用react-spring的useSprings使用户能够以FieldArray格式对商品进行重新排序。 useSprings可拖动列表演示（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帮助函数，以无缝地重新排序，添加和删除{ {1}}。

Answer 1

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

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

这会将新项目添加到列表的末尾。

Answer 2

我至少遇到了您的＃1问题。

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

react-springs@9.0.0.beta-23有一个依赖项数组，并且与链接到here的沙盒中的useSpringsFixed包装器一起，应强制渲染更改后的道具。

希望也能解决您的问题。

将react-spring useSprings与动态项目数组结合使用

2 个答案: