0
votes

peut accéder à une position spécifique d'un tableau mais ne peut pas accéder à un objet spécifique à l'intérieur de ce tableau

J'ai un problème qui, comme le titre l'indique pour lui-même ..

Je peux accéder à une position spécifique d'un tableau mais je ne peux pas accéder à un objet spécifique à l'intérieur de ce tableau ..

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
}

javascript reactjs

4 commentaires

Fonctionne pour moi quand je fais console.log (accessLevels [index] .name)

Je ne vois pas pourquoi cela ne devrait pas fonctionner. Une alternative serait d'utiliser la notation entre crochets pour le champ accessLevels [index] ['name'] , cependant, la notation par points est normalement préférée. Les deux tests suivants ont fonctionné sans problème dans mon test avec Babel: const array = [{foo: 1, bar: 2}, {foo: 2, bar: 3}]; console.log (tableau [0] .foo); // imprime 1 console.log (array [1] ['bar']); // imprime 3

Je soupçonne que cela peut avoir à voir avec l'argument spécifique de cette fonction. Êtes-vous certain que lorsque vous obtenez une erreur, c'est pour le même appel que lorsque vous recevez un message console.log réussi? Êtes-vous sûr qu'il n'y a pas de résultat de la journalisation de undefined avant l'erreur? Inclure dans la question les messages d'appel et de journal spécifiques qui entraînent une erreur serait utile pour diagnostiquer le problème.

J'ai trouvé la solution .. j'ai répondu à ma question

3 Réponses :

4
votes

Dans cet exemple semble fonctionner, mais je vous suggère de l'utiliser. find (), vous pouvez donc avoir l'objet en un seul appel au lieu de l'obtenir à partir d'un index. Tout comme

const getAccessLevel = 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 = accessLevel.name;

    return AccessLevelName;
  };

2 commentaires

Cela ne devrait pas être la solution

J'ai trouvé la solution .. j'ai répondu à ma question

0
votes

fonctionne parfaitement pour moi: xxx

sortie: xxx

code

1 commentaires

J'ai trouvé la solution .. j'ai répondu à ma question

0
votes

J'ai trouvé le problème! Cela se produisait à cause de l'ordre de rendu de réaction ... depuis la première fois que cette fonction a été appelée, id n'a pas été défini.

qui a obtenu l'erreur ici:

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

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

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

Ce que j'ai fait pour le réparer, c'est d'utiliser le hook useEffect. . lorsqu'une fonction d'action (redux) change la valeur de données qui a la valeur de l'id, elle exécute getAccessLevel une fois de plus, mais avec l'id défini!

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:

let AccessLevelName = accessLevels[index].name

0 commentaires