javascript - 使用方法链接的未定义的未捕获属性

Question

使用下面的代码我得到了属性未定义的错误，我不知道出了什么问题。我在渲染中执行 console.log(navList) 它具有值(value)。我做 if(!navList) return null 我仍然遇到同样的错误，我怀疑它与链接有关。

render(){
const navList = [
            {
                path: '/boss',
                text: 'Boss',
                icon: 'boss',
                title: 'Boss List',
                component: Talent,
                hide: user.type==='boss'
            },
            {
                path: '/talent',
                text: 'Talent',
                icon: 'talent',
                title: 'Talents List',
                component: Boss,
                hide: user.type==='talent'
            }]
return(
<div>{navList.find(v=>v.path===pathname).text}</div>
)
}

Answer 1

array.find() 返回匹配数组元素的值，如果未找到则返回 undefined。

您的错误表明您正在尝试访问 undefined 上的属性，因此，它不能在您的数组中找到所需的路径属性。因此，.find() 返回 undefined，然后您尝试访问 undefined.text，这会导致您发现错误。

在常规代码中，你会做这样的事情:

let obj = navList.find(v=>v.path===pathname);
let text = obj ? obj.text : "";

或者单行方法:

(navList.find(v=>v.path===pathname) || {text: ""}).text

就个人而言，我可能只是为此创建一个小函数并调用它。

function getTextForPath(list, path) {
    let obj = list.find(v=>v.path===pathname);
    return obj ? obj.text : "";
}

然后你就可以使用它了

return(
    <div>{getTextForPath(navList, pathname)}</div>
)

如果您经常按路径搜索 navList，那么您可能需要一种不同类型的数据结构，例如按路径索引的 Map 对象。然后，您可以直接通过路径请求匹配，而无需每次都进行暴力搜索。