Использование реагирующей пружины useSprings с массивом динамических элементов

Question

Я пытаюсь использовать реактивную пружину useSprings, чтобы пользователи могли переупорядочивать элементы в форме FieldArray.Демонстрация useSprings Draggable List (, найденная здесь ) использует useRef для управления порядком элементов.FieldArray поставляется с рядом вспомогательных функций массива для вставки, удаления и перемещения элементов.

У меня возникают следующие проблемы:

1) Переупорядочение существующих элементов с помощью Formik'smove вспомогательный метод массива успешно изменяет порядок массива, но для визуализации правильного порядка требуется дополнительный щелчок

2) Добавление или удаление элементов массива с использованием вспомогательных методов массива приводит к неожиданным результатам.Уменьшение длины ссылки не меняет длину 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 с реагирующей пружиной для плавного изменения порядка, добавления и удаления элементов в пределах * 1034.*.

Answer 1

Я столкнулся по крайней мере с вашей проблемой № 1.

Обратите внимание, что функция setSprings сама по себе не выполняет рендеринг, а в useSprings отсутствует массив dependencies для автоматического обновления.

react-springs@9.0.0.beta-23 имеет массив зависимостей, и вместе с оболочкой useSpringsFixed в изолированной программной среде, которая связана здесь , он должен принудительно выполнить повторную визуализацию на измененных объектах.

Надеюсь, это тоже поможет вашей проблеме.