メソッドチェインを使用して未定義の未知のプロパティ

Question

以下のコードで、プロパティのエラーが未定義になっていますが、何が間違っているのか分かりません。私はそれが値を持っているレンダリングでconsole.log（navList）を行います。私は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 : ""; 
} 

そして、あなたが定期的にパスしてnavListを探しているなら、あなたはそれを

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

を使用することができ、あなたはでインデックス化され、おそらくMapオブジェクトのようなデータ構造の異なるタイプの場合がありますパス。それでは、毎回ブルートフォース検索を使わずに直接経路で一致をリクエストすることができます。