Cannot map over array in Typescript

Question

I am attempting to use the .map() function over an array in Typescript.

I run the following code:

Promisefunction().then((data : [{item: String}]) => {

    data.map((Object) => {
       console.log(Object.attribute)
   })

})

In the console, I get the expected result and it seems to work fine but then the program crashes and I get the following error:

Unhandled Rejection (TypeError): Cannot read property 'map' of undefined

I assume this is because Typescript doesn't know Data is an array, yet I have established that up above. So I am left confused.

Any help would be appreciated, thank you.

**Edit 1: Added body of promisefunction **

export default function promiseFunction(){
    return new Promise<any[]>(function(resolve, reject){
        const { data, loading, error, fetchMore } = useQuery(
            QUERY,
            {
                variables: {
                    first: 15,
                    offset: 0
                },
                errorPolicy: 'all'
            });

            if(data){
                resolve(data.getData);
            }
            else if(error){
                reject("broke");
            }

    })

}

It looks like Promisefunction doesn't return anything which is why data is undefined. — JLai
– JLai, Commented Dec 12, 2019 at 16:16
You're experiencing a runtime error, not a compile time error- this means that data is undefined. — kschaer
– kschaer, Commented Dec 12, 2019 at 18:35

Nicholas Tower · Accepted Answer · 2019-12-13 14:57:57Z

3

That error is happening at runtime, not compile time. So typescript is not really involved. The promise returned by Promisefunction is apparently not resolving to an array. Typescript won't know about this, since it only knows the information you provide to it at compile time, and that information is apparently flawed. If you can share the code for Promisefunction, we may be able to diagnose it.

EDIT: With your latest updates, there is more of an indication of what's wrong, but also several new problems. You are attempting to use a react hook inside of an arbitrary function. This is not supported. Hooks can only be used inside of functional components and inside of other hooks.

So your code is running, then calling useQuery in a context where it is not meant to be called. Use query returns a data object with no data in it, and you resolve your promise with undefined. You may have told typescript that it's a Promise<any[]>, but that was incorrect. Since you've given typescript incorrect information, it will assume that incorrect information from then on, leading to it not being able to point out your problem when you try to do data.map

It's hard for me to recommend a course of action to you because you seem to be misusing the tools at hand. I don't understand why you would be wanting to wrap a hook in a promise in the first place.

edited Dec 13, 2019 at 14:57

answered Dec 12, 2019 at 16:16

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

BURGERFLIPPER101 Over a year ago

Data is an array of objects. When I print the contents of each item in console.log() it displays it correctly. So I get the content of Object.Attribute in the console, but then it crashes.

Oleksandr Vetoshkin Over a year ago

@BURGERFLIPPER101, can you show where did you insert console.log?

BURGERFLIPPER101 Over a year ago

The console.log() is in the OP within the map function. The array of objects is being returned from the promiseFunction. I can do a console.log of the object and its an array of objects. I added the type inferring by doing (data : any[]) to declare it as an array but nothing changes.

champion-runner · Accepted Answer · 2019-12-12 18:30:16Z

1

TypeScript cannot contextually determine what the Promise resolves to (see:this) therefore you have to assert it.

Something like:

function getARPTable() {
return new Promise<any[]>((resolve, reject) => {
    arp.table((error, devices) => {
        if (error) reject(error);
        else resolve(devices);
    });
});
}

answered Dec 12, 2019 at 18:30

champion-runner

1,6771 gold badge17 silver badges27 bronze badges

1 Comment

BURGERFLIPPER101 Over a year ago

I've added the body of the promiseFunction. Declaring what the data is doesn't seem to change anything as I still get the same error.

Collectives™ on Stack Overflow

Cannot map over array in Typescript

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related