使用react-spring useSprings和動態項目數組

Question

我試圖使用react-spring的useSprings來讓用戶重新排序formik FieldArray的項目。 useSprings Draggable List演示（ 在此處找到 ）使用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項目。

Answer 1

我至少遇到過你的＃1問題。

請注意， setSprings函數不會自行重新呈現任何內容，並且useSprings缺少dependencies數組以自動更新。

react-springs@9.0.0.beta-23有一個依賴項數組，並且與在這里鏈接的沙箱中的useSpringsFixed包裝器一起，它應該強制重新渲染已更改的道具。

希望這也有助於解決您的問題。