Question

我正在编写一个自定义迭代器，它支持拖放操作以对列表进行重新排序。我不确定如何更新admin / resources / xxx / data的顺序。

我试图通过props设置组件状态，但是由于react-admin在各处都使用cloneElement，因此它非常脆弱。

现在代码如下：

const Sortable = props => (
  <Datagrid {...props} body={<SortableBody />} />
)

const SortbaleBody = connect({null, {dispatchSortableUpdate}})((props) => (
  const sortable = useMemo(() => Object.values(props.data), [data]);
  const moveRecord = (newData) => {
    dispatchSortableUpdate({data: newData})
  }
  return (
    <DragDropContextProvider backend={HTML5Backend}>
      <TableBody>
        {sortable.map((record, index) => React.cloneElement(SortableRow, props, children))}
      </TableBody>
    </DragDropContextProvider>
  )
))

这是react-dnd可排序的示例：https://codesandbox.io/embed/github/react-dnd/react-dnd/tree/gh-pages/examples_js/04-sortable/simple?fontsize=14

我如何更新admin / resources / xxx / data的顺序？我在对Sortable正确吗？

Answer 1

我最终使用

const sortable = useMemo(() => Object.values(data).sort((a,b) => a.position - b.position))

const moveRecord = (dragIndex, hoverIndex) => {
  const dragRecord = sortable[dragIndex];
  const hoverRecord = sortable[hoverIndex];

  dragRecord.position = hoverIndex + 1;
  hoverRecord.position = dragIndex + 1;
  dispatchSortableUpdate({ id: dragRecord.id, data: dragRecord });
  dispatchSortableUpdate({ id: hoverRecord.id, data: hoverRecord });
}

const sortableUpdate = ({ id, data }) => ({
  type: SORTABLE_UPDATE,
  payload: {
    id,
    data,
  },
  meta: {
    resource: 'xxx',
    fetchResponse: UPDATE,
    fetchStatus: FETCH_END,
  },
});

如何在react-admin中管理可排序的迭代器状态？

1 个答案: