Как использовать функцию в сопоставленном компоненте в maquettejs

Question

В настоящее время у меня проблема, когда я пытаюсь использовать функцию в компоненте createMapping, это код

itemConcurso.js

import {h, createMapping} from 'maquette';

    function enterAnim(domNode, properties) {
        domNode.className += ' animated fadeInUp';
    }

    const item = createMapping(
        function getSourceKey(source) {
            console.log(source);
            return source;
        },
        function createTarget(item, i) {
            return (func) => {

                const helper = () => { func(item.Id) };

                return {
                    renderMaquette: function() {
                        return h(`ul#${item.Id}.item-concurso.list-group.mt-3`, { key: item.Id, enterAnimation: enterAnim, onclick: helper}, [
                            h('li.list-group-item.list-group-item.list-heading-primary', [
                                h('div.pull-right', [
                                    h('h4', item.Ministerio__c)
                                    ]), 
                                h('h3', item.Name.toUpperCase())
                                ]),
                            h("li.list-group-item", [   
                                h('h4', item.activity),
                                h('ul', [
                                    h('li', ['Perfil buscado: ', item.Nombre_de_perfil__c]),
                                    h('li', ['Conocimientos requeridos: ', item.Conocimientos_tecnicos_requeridos__c]),
                                    h('li', ['Descripción: ', item.Descripcion__c]),
                                    ])  
                                ])
                            ]);
                    }
                }
            };
        },
        function updateTarget(updatedSource, target) {
            console.log(updatedSource);
        });

    export default item;

App.js

function probando(id) {
    console.log(id);
}

const app = function() {
    return {
        renderMaquette: function() {
            return h('div#concurso', [
                searchB.renderMaquette(),
                itemConcurso.results.map(function(component) {
                    return component(test).renderMaquette();
                })]);
        }
    }
}

Это на самом деле работает, но в первый раз, когда я щелкаю компонент, он выдает следующую ошибку:

vendor.bundle.js:15132 Uncaught Error: Functions may not be updated on subsequent renders (property: onclick). Hint: declare event handler functions outside the render() function.
    at updateProperties (vendor.bundle.js:15132)
    at updateDom (vendor.bundle.js:15370)
    at updateChildren (vendor.bundle.js:15241)
    at updateDom (vendor.bundle.js:15369)
    at Object.update (vendor.bundle.js:15393)
    at doRender (vendor.bundle.js:15636)

Я пробовал много вещей, но кажется, что есть вещь, которую я не понимаю

Answer 1

Проблема с кодом в том, что createTarget возвращает функцию, которая производит новый {renderMaquette: ...} случаи во время app.renderMaquette,

Поскольку эти экземпляры являются новыми, создается новый помощник, отсюда и ошибка.

Если вы хотите передать функцию элементу, вы можете экспортировать функцию createItem(func) вместо export default item