JavaScript Map.get(variableName) 返回 undefined

Question

I am using react router to pass an Id via the URL parameter and setting my variable like let { posterId } = useParams();

This seems to be working as expected because I can write it out in the JSX just fine <h1> This is a specific poster {posterId}</h1>

However, when I try to use it to get from a map that I am passing via props it returns undefined from the map props.postersMap.get(posterId) .

I verified that the map is populated and if I hard code the .get method to the variable value it works as expected. Is there something I am just overlooking?

Edit: full component code

import React from 'react'
import { useParams} from 'react-router-dom'

export default function Poster(props) {
    let { posterId } = useParams();

    return (
        <div>
            {console.log(props.postersMap)}
            {console.log(posterId)}
            {console.log(props.postersMap.get(posterId))}
            {props.postersMap.get(posterId) ? <p>{props.postersMap.get(posterId).band}</p> : <p></p>}

        </div>
    )
}

Here is what my console.logs are showing

Answer 1

The js Map keys must match exactly: if keys are numbers (and they are in your case), then you retrieve them using numeric values.

props.postersMap.get(Number(posterId)) would do.

Or guarantee you're providing a valid numeric any other available way.