如何使 React 管理员的 <SimpleFormIterator> 在项目添加时表现得像一个堆栈（在顶部添加项目）？

Question

我有一个带有嵌套项目列表的项目。我可以使用和单独编辑这些嵌套项。问题是当我在列表中插入一个新项目时，它成为最后一项。我希望它成为第一个，然后将所有其他项目向下移动一个位置。

也许使用带有 addOnTop 回调的自定义之类的东西会有帮助？但是我看不出有什么方法可以在不从头重写整个组件的情况下让它工作。

<SimpleFormIterator
     addButton={<ListAddButton onClick={addOnTop??} />}
     removeButton={<ListRemoveButton />}
>
...
</SimpleFormIterator>

Answer 1

也许试试 unshift()。这是 link： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift

Answer 2

最后我想我设法解决了这样的问题：

const form = useForm();
    const getData = useCallback(() => {
        const emptyArticle = {
            URL: "",
            title: "",
            image: "",
            eyelet: "",
            topic: "",
        };
        const { articles } = form.getState().values;
        if (!articles) return [emptyArticle];
        articles.pop();
        articles.unshift(emptyArticle);
        return articles;
}, [form]);

<SimpleFormIterator
    addButton={
        <ListAddButton onClick={() => form.change("articles", getData())} />
  }
    removeButton={<ListRemoveButton />}
    TransitionProps={{
        enter: false,
        exit: false,
        addEndListener: () => {},
    }}
>
<SimpleFormIterator/>

我不确定这是最好的方法，但它似乎有效，尽管目前有一个 bug with this component 强制使用 "emptyArticle"而不是简单地推送 "undefined".

如何使 React 管理员的 <SimpleFormIterator> 在项目添加时表现得像一个堆栈（在顶部添加项目）？

How make React admin's <SimpleFormIterator> behave as a stack on item addition (add item on top)?

javascript

reactjs

react-admin

react-final-form