Использование React-Spring useSprings с массивом динамических элементов

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

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

1) Изменение порядка существующих элементов с помощью вспомогательного метода массива formik move успешно изменяет порядок массива, но требует дополнительного щелчка мышью для отображения правильного порядка

2) Добавление или удаление элементов массива с помощью вспомогательных методов массива приводит к неожиданным результатам. Изменение длины ссылки не меняет длину order.current внутри useGesture

Я также пробовал использовать useState вместо useRef и обновлять состояние с помощью useEffect при изменении свойств.

Вот созданная мной песочница кода: https://codesandbox.io/s/usesprings-with-fieldarray-56bex

In the bind function, commenting out 

order.current = newOrder;
and uncommenting 
// arrayHelpers.move(currIndex, currRow);
shows issue #1 that I mentioned above.

Я хотел бы иметь возможность использовать вспомогательные функции formik move, insert и remove с react-spring для плавного изменения порядка, добавления и удаления элементов в FieldArray.


reactjs javascript formik react-spring
person Stafford Rose    schedule 28.05.2019    source источник
comment
Привет! Удалось ли вам это решить?   -  person Víctor Navarro    schedule 09.08.2020

Ответы (2)


arrow_upward
1
arrow_downward

возможно, вы можете попробовать установить новый order.current после добавления нового элемента

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

это добавит новый элемент в конец списка.

person Jose LM    schedule 17.09.2019

arrow_upward
0
arrow_downward

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

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

[email protected] имеет массив зависимостей и вместе с useSpringsFixed оболочкой в ​​песочнице, которая связана с здесь он должен принудительно выполнить рендеринг на измененных реквизитах.

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

person bebbi    schedule 24.06.2019
comment
Спасибо за ваш ответ. Сейчас я слежу за проблемой, которую вы открыли на Github. - person Stafford Rose; 27.06.2019