JavaScript Map.get(variableName) 返回未定义

Question

我正在使用 React 路由器通过 URL 参数传递 Id 并设置我的变量，如 let { posterId } = useParams();

这似乎按预期工作，因为我可以在 JSX 中很好地写出它 <h1> This is a specific poster {posterId}</h1>

但是，当我尝试使用它从我通过 props 传递的 map 获取时，它会从 map props.postersMap.get(posterId) 返回未定义的值。 。

我验证了 map 已填充，如果我将 .get 方法硬编码为变量值，它会按预期工作。有什么我忽略的事情吗？

编辑:完整组件代码

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>
    )
}

这是我的 console.logs 显示的内容

Answer 1

js Map 键必须完全匹配:如果键是数字(并且在您的情况下)，那么您可以使用数值检索它们。

props.postersMap.get(Number(posterId)) 就可以了。

或者保证您以任何其他可用方式提供有效的数字。