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

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 的顺序？我在做可排序的权利吗？

标签： react-admin

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,
  },
});