"Error occurs as a result of an unspecified attribute in the map

Question

"Error occurs as a result of an unspecified attribute in the map

Hello, I am currently traversing a tree structure recursively. To handle undefined nodes in the tree, I have implemented guards to prevent any failures. However, during the mapping of children nodes, I encountered the following error:

Error Output

Adrian has children: Marian, Dan,
Dan is a leaf
Marian has children: Liviu, Farcas,
t.ngfactory.js? 
    [sm]:1 ERROR TypeError: Cannot read property 'logRecursive' of undefined
                at push../src/app/pages/tree-view/treeview.component.ts.TreeViewComponent.logRecursive (tree-view.component.ts:29)
            at Array.map (<anonymous>)
            at TreeViewComponent.push../src/app/pages/tree-view/tree-view.component.ts.TreeViewComponent.logRecursive (tree-view.component.ts:29)
            at TreeViewComponent.push../src/app/pages/tree-view/tree-view.component.ts.TreeViewComponent.ngOnInit (tree-view.component.ts:37)
            at checkAndUpdateDirectiveInline (core.js:18537)
            at checkAndUpdateNodeInline (core.js:19801)
            at checkAndUpdateNode (core.js:19763)
            at debugCheckAndUpdateNode (core.js:20397)
            at debugCheckDirectivesFn (core.js:20357)
            at Object.eval [as updateDirectives] (TreeViewComponent_Host.ngfactory.js? [sm]:1)

Code Snippet

 public logRecursive(model: TreeModel): number {
    if (model == null || model === undefined) {
      console.log("null");
      return 0;
    }
    if (model.children === undefined || model.children.length == 0){
      console.log(`${model.id} is a leaf`);
      return 1;
    }

    console.log(`${model.id} has children: ${model.children.reduce((x,y)=>y.id+","+x,"")}`);
    var result = model.children.map(this.logRecursive).reduce((x,y)=>x+y);
    return result;
}

Data Model

export interface TreeModel {
    id: string;
    children: Array<TreeModel>;
}

Note I have tried various guard combinations for handling children being null, undefined, or having a length of zero but the issue still persists on the second level when processing the 'Marian' node's children.

Input Data

let a: TreeModel = {
       id: "Adrian",
       children: [
         {id: "Dan", children: []},
         {id: "Marian", children: [ // Error occurs here while mapping children...
           {id: "Farcas", children: []},
           {id: "Liviu", children: []}
         ]}
       ]
     };

Function Call logRecursive(a);

typescript recursion mapreduce

Answer 1

Answer №1

The issue arises when the function this.logRecursive is called with an undefined value for this during a recursive call. This occurs because in Javascript (and Typescript), the value of this is determined by the caller, not the function declaration itself. Therefore, the caller can define any value for this when invoking a member function.

When passing this.logRecursive to the map function, it is up to map to decide what value of

this</code should be used to call <code>logRecursive

. If map does not supply a specific this, an error will occur.

To resolve this issue, one solution is to bind the value of this using this.logRecursive.bind(this) when passing the function to map. However, this approach is not recommended in Typescript due to weak typing in the current version; improvements are expected in future releases.

Another alternative is to use an arrow function, which captures the value of this from the context of its declaration.

interface TreeModel {
    id: string;
    children: Array<TreeModel>;
}
let a: TreeModel = {
    id: "Adrian",
    children: [
        { id: "Dan", children: [] },
        {
            id: "Marian", children: [  //fails when mapping his children...
                { id: "Farcas", children: [] },
                { id: "Liviu", children: [] }
            ]
        }
    ]
};

class Comp {
    logRecursive(model: TreeModel): number {
        if (model == null || model == undefined) {
            console.log("null");
            return 0;
        }
        if (model.children == undefined || model.children.length == 0) {
            console.log(`${model.id} is leaf`);
            return 1;
        }

        console.log(`${model.id} has children:${model.children.reduce((x, y) => y.id + "," + x, "")}`);
        var result = model.children.map(m => this.logRecursive(m)).reduce((x, y) => x + y);
        return result;
    }
}

Answer 2

The issue arises when the function this.logRecursive is called with an undefined value for this during a recursive call. This occurs because in Javascript (and Typescript), the value of this is determined by the caller, not the function declaration itself. Therefore, the caller can define any value for this when invoking a member function.

When passing this.logRecursive to the map function, it is up to map to decide what value of

this</code should be used to call <code>logRecursive

. If map does not supply a specific this, an error will occur.

To resolve this issue, one solution is to bind the value of this using this.logRecursive.bind(this) when passing the function to map. However, this approach is not recommended in Typescript due to weak typing in the current version; improvements are expected in future releases.

Another alternative is to use an arrow function, which captures the value of this from the context of its declaration.

interface TreeModel {
    id: string;
    children: Array<TreeModel>;
}
let a: TreeModel = {
    id: "Adrian",
    children: [
        { id: "Dan", children: [] },
        {
            id: "Marian", children: [  //fails when mapping his children...
                { id: "Farcas", children: [] },
                { id: "Liviu", children: [] }
            ]
        }
    ]
};

class Comp {
    logRecursive(model: TreeModel): number {
        if (model == null || model == undefined) {
            console.log("null");
            return 0;
        }
        if (model.children == undefined || model.children.length == 0) {
            console.log(`${model.id} is leaf`);
            return 1;
        }

        console.log(`${model.id} has children:${model.children.reduce((x, y) => y.id + "," + x, "")}`);
        var result = model.children.map(m => this.logRecursive(m)).reduce((x, y) => x + y);
        return result;
    }
}

"Error occurs as a result of an unspecified attribute in the map

Answer №1

Similar questions

Invalid for the purpose of storage

Could it be possible for TypeScript inference to directly infer the value and omit the key in the process?

Experience the dynamic synergy of React and typescript combined, harnessing

Securing redirection in WebPart using Azure AD: Best practices

Proper method for determining return type through the use of `infer`

Utilizing a directive in contexts beyond a component

Learn how to restrict input to only specific characters in an input box using Angular2 and validations

React-router-dom TypeScript error when defining the type of the prop parameter in the loader

Having trouble resolving the signature of a class decorator when invoked as an expression with @Injectable in Angular

What is the reason behind TypeScript choosing to define properties on the prototype rather than the object itself?

What is the best way to utilize the `Headers` iterator within a web browser?

AngularFire UPDATE -> APPLY CHANGES

Enhancing performance with React.memo and TypeScript

Pass the type of object property as an argument in the function

The React Quill interface is unable to load due to an undefined window

Encountered an error of 'npm ERR! invalid semver' when attempting to release an npm package

Enhance your Vuex action types in Typescript by adding new actions or extending existing

Issue with displaying tab icons in Ionic 4

Sorting arrays in Typescript

Error encountered while attempting to load an image in a React component using TypeScript linting