Question

使用下面的代码我得到属性undefined的错误，我不知道是什么问题。我在它有值的渲染中执行console.log（navList）。我做if（！navList）返回null我仍然得到同样的错误，我怀疑它有链接todo。

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对象。然后，您可以直接通过路径直接请求匹配，而无需每次都进行强力搜索。

使用方法链接

1 个答案: