拖放不适用于 useFieldArray 中的嵌套数组

Question

我正在尝试在嵌套的输入数组上实现拖放功能。 我正在使用react-beautiful-dnd和react-hook-form库： useFieldArray挂钩管理表单， useController挂钩控制输入。

我面临的问题是当我尝试重新排序任何子输入时，更改仅发生在最后一项。 这是一个沙箱。

要重现该问题，您需要至少添加 2 个顶级输入以及为每个输入添加 2 个嵌套输入。 接下来尝试重新排序第一个顶级项目的嵌套输入。 结果，第二个项目的子输入将改变它们的位置，而最初拖动的输入将恢复到它们原来的 position。

我尝试将ref传递给嵌套输入，并使用useImperativeHandle钩子来公开子组件中useFieldArray钩子的move方法以重新排序。 但是每次只有最后一个孩子被重新排序

Answer 1

解决了

我对我的嵌套字段数组使用相同的引用来存储重新排序子 function 因此，当附加一个新的嵌套子字段数组时，它会覆盖重新排序 function 并且只移动属于最后一个嵌套字段数组的项目。

为了解决这个问题，我必须将 function 而不是ref传递给嵌套字段，这会为每个字段创建不同的ref

function Parent () {
  const childrenRef = useRef({});
  const setReorder = useCallback(
  (index, reorderCallback) => {
    childrenRef.current[index] = reorderCallback;
  },
  [childrenRef]
 );
  ...

  return (
   <Child
     setReorder={setReorder}
   />
 )
}

function Child ({ setReorder, nestIndex }) {
  useEffect(() => {
    setReorder(`child-${nestIndex}`, (from, to) => {
      move(from, to);
    });
  }, [nestIndex, setReorder, move]);
}

这是工作沙箱