配列の特定の位置にアクセスできますが、この配列内の特定のオブジェクトにはアクセスできません

debugcn 投稿 Dev

ジュリア・ラージ

タイトル通り、問題があります。

配列の特定の位置にアクセスできますが、この配列内の特定のオブジェクトにアクセスできません。

export const getAccessLevel = id =>{      

    const accessLevels = [
        {id: 0, name: 'Admin'},
        {id: 1, name: 'Customer'},
        {id: 2, name: 'Client'},
        {id: 3, name: 'Viewer'}
    ]

    let index = accessLevels.findIndex(array => array.id === id);
    console.log(index) // result : 3


    console.log(accessLevels[index]) 
    // this is returning {id: 3, name: "Viewer"}

    let AccessLevelName = accessLevels[index].name
    // this is return error : Cannot read property 'name' of undefined

    return AccessLevelName
}

ジュリア・ラージ

問題を見つけました！これは、reactレンダリングの順序が原因で発生していました...この関数が最初に呼び出されたときからidが定義されていませんでした。

ここでエラーが発生しました：

let AccessLevelName = accessLevels[index].name

それを修正するために私がしたことは、useEffectフックを使用することでした。アクション（redux）関数がidの値を持つデータ値を変更すると、もう一度getAccessLevelを実行しますが、idが定義されています！

getAccessLevel：

export const getAccessLevel = id => {

    console.log(id)


    const accessLevels = [
        { id: 0, name: "Admin" },
        { id: 1, name: "Customer" },
        { id: 2, name: "Client" },
        { id: 3, name: "Viewer" }
    ];

    let accessLevel = accessLevels.find(array => array.id === id);
    console.log(accessLevel);

    let AccessLevelName = ''

    if (id) {
        AccessLevelName = accessLevel.name
    }

    return AccessLevelName;

}

UseEffect：

 useEffect(() => {
        props.findGroup(id)
    }, [])

    const handleAccessLevel = () =>{
        setAccessLevelName(getAccessLevel(props.data.accessLevel))
    }

    useEffect(() => {
        handleAccessLevel()
      }, [props.data])

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]