Рекурсивные остановки рекурсии без ошибок

Question

У меня возникла проблема с рендерингом некоторых элементов в React. (я использую ImmutableJS)

renderComponents: function(components) { 
    if(components.isEmpty()) return []; 

    var table = []; 

    components.map(function(component) { 
     table.push(<ComponentTableElement key={ component.get('id') } data={ component } />); 

     if(component.has('children')) { 
     var children = component.get('children'); 
     table.concat(this.renderComponents(children)); 
     } 
    }); 

    return table; 
    }, 

Как я искал ошибки, я обнаружил, что this.renderComponents(children) ничего не возвратится и код почему-то останавливается.

Я имею в виду, что перед этой строкой все работает нормально, но затем после этой строки, когда я пытаюсь сделать console.log что-то, оно не появляется. И он даже не достигает return table.

Итак, что не так с этим кодом?

Answer 1

В контексте функции вы передаете карту, this относится к window объекту, а не к текущему экземпляру компоненты, так this.renderComponents не определен, когда вы пытаетесь вызвать его.

components.map(function(component) { 
    this === window; 
}); 

Вы можете передать значение для использования в качестве this в организме вашей функции в качестве второго параметра Array::map.

components.map(function(component) { 
    table.push(<ComponentTableElement key={ component.get('id') } data={ component } />); 

    if(component.has('children')) { 
    var children = component.get('children'); 
    // here, `this` refers to the component instance 
    table.concat(this.renderComponents(children)); 
    } 
}, this); 

Если вы используете ES6, вы можете также использовать функции жира со стрелками, которые автоматически привязаны к this.

components.map((component) => { 
    table.push(<ComponentTableElement key={ component.get('id') } data={ component } />); 

    if(component.has('children')) { 
    var children = component.get('children'); 
    // here, `this` refers to the component instance 
    table.concat(this.renderComponents(children)); 
    } 
});