0

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

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

我使用 aMap作为值，但是当我向地图添加一个新元素，然后调用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);

我究竟做错了什么？

谢谢！

4

1 回答 1

0

我通过使用 immutable-js 的地图解决了这个问题：https ://github.com/immutable-js/immutable-js

于 2020-04-18T21:18:35.517 回答