Netlify CMS 自定义小部件不适用于地图？

Question

我一直在尝试为 Netlify CMS 创建自定义小部件以允许插入键值对。然而，有些地方出了问题，我想它们可能是相关的，所以我就它们提出一个问题。

这是我的第一个自定义小部件，我主要基于官方教程：https://www.netlifycms.org/docs/custom-widgets/

我使用 Map 作为值，但是当我向地图添加一个新元素，然后调用 onChange(value) 回调时，似乎没有任何反应。但是，如果我将其更改为 onChange(new Map(value))，它会更新。 onChange 回调似乎需要一个新对象？

其次，这个值好像并没有真正保存起来。当我填写其他小部件并刷新页面时，它会要求恢复以前的值。但是它不恢复地图，而恢复其他值就好了。

最后，我得到了未捕获的异常：在我对地图进行任何更改后，对象就像一秒钟一样。我的猜测是 Netlify CMS 正在尝试保存地图（将其去抖动一秒钟，因此它不会保存我键入的每个字母），但失败并抛出该异常。这将解释之前的问题（非储蓄问题）。

我目前自定义小部件的完整代码是：

var IngredientsControl = createClass({
    getDefaultProps: function () {
        return {
            value: new Map()
        };
    },

    addElement: function (e) {
        var value = this.props.value;
        value.set("id", "Description");

        //is.props.onChange(value);
        this.props.onChange(new Map(value));
    },

    handleIdChange: function (oldId, newId) {
        console.log(oldId, newId);
        var value = this.props.value;
        var description = value.get(oldId);
        value.delete(oldId);
        value.set(newId, description);

        //this.props.onChange(value);
        this.props.onChange(new Map(value));
    },

    handleDescriptionChange: function (id, description) {
        console.log(id, description);
        var value = this.props.value;
        value.set(id.toLowerCase(), description);

        //this.props.onChange(value);
        this.props.onChange(new Map(value));
    },

    render: function () {
        var value = this.props.value;

        var handleIdChange = this.handleIdChange;
        var handleDescriptionChange = this.handleDescriptionChange;

        var items = [];
        for (var [id, description] of value) {
            var li = h('li', {},
                h('input', { type: 'text', value: id, onChange: function (e) { handleIdChange(id, e.target.value); } }),
                h('input', { type: 'text', value: description, onChange: function (e) { handleDescriptionChange(id, e.target.value); } })
            );
            items.push(li);
        }

        return h('div', { className: this.props.classNameWrapper },
            h('input', {
                type: 'button',
                value: "Add element",
                onClick: this.addElement
            }),
            h('ul', {}, items)
        )
    }
});

var IngredientsPreview = createClass({
    render: function () {
        var value = this.props.value;
        var items = [];
        for (var [id, description] of value) {
            var li = h('li', {},
                h('span', {}, id),
                h('span', {}, ": "),
                h('span', {}, description)
            );
            items.push(li);
        }

        return h('ul', {}, items);
    }
});

CMS.registerWidget('ingredients', IngredientsControl, IngredientsPreview);

我做错了什么？

谢谢！

Answer 1

我使用 immutable-js 的映射解决了这个问题：https://github.com/immutable-js/immutable-js

Netlify CMS 自定义小部件不适用于地图？

Netlify CMS custom widget not working with Map?

javascript

widget

netlify-cms