3
votes

Attribuer la même valeur à différentes clés dans object literal reactjs

J'utilise object literal comme alternative aux instructions if else / switch. Ce faisant, je ne sais pas comment attribuer la même valeur à différentes touches.

Qu'est-ce que j'essaie de faire? Basé sur la variable nommée "utilisateur" devrait rediriger vers différents liens. si la valeur de "user" est admin ou manager doit rediriger pour dire "www.exampledomain.com". Si la valeur de "utilisateur" est "acheteur", vous devez rediriger vers " https://stackoverflow.com ".

Pour ce faire, j'ai utilisé un objet littéral au lieu de if-else qui est maladroit. Voici le code,

get user()  {
    return ( {
        'admin': 'manager': www.exampledomain.com',
        'purchaser': 'https://stackoverflow.com',
    } )[user];}

Comme vous le voyez à partir du code ci-dessus, les touches admin et manager pointent vers la même URL "www.exampledomain.com". Y a-t-il un moyen de lui attribuer quelque chose comme ci-dessous.

get user()  {
    return ( {
        'admin': 'www.exampledomain.com',
        'manager': 'www.exampledomain.com',
        'purchaser': 'https://stackoverflow.com',
    } )[user];}

Quelqu'un pourrait-il m'aider à résoudre ce problème. Merci.

javascript reactjs

0 commentaires

3 Réponses :

1
votes

Personnellement, je ne vois aucune raison d'utiliser la deuxième idée, de plus ce n'est pas du code JS valide. Si vous essayez de réduire la duplication de code, vous pouvez simplement extraire vos urls dans une variable constante comme celle-ci.

  static get REDIRECT_URLS() {
    return { 
       "PRIMARY_SITE" : "www.exampledomain.com",
       "SECONDARY_SITE" : "stackoverflow.com",
    };
  }

  get user()  {
    return ( {
        'manager' : FooClass.REDIRECT_URLS.PRIMARY_SITE,
        'admin': FooClass.REDIRECT_URLS.PRIMARY_SITE,
        'purchaser': FooClass.REDIRECT_URLS.SECONDARY_SITE,
    } )[user];}

Bien sûr, il existe d'autres solutions possibles, comme avoir des clés comme 'admin | manager': "url" , mais cela ne semble pas être un bon choix et vous devez ajouter une logique supplémentaire pour parcourir les clés d'objet et vérifier si une clé correspond à l'expression régulière .

5 commentaires

@ManavM comme je l'ai noté, il devrait y avoir une logique supplémentaire pour faire correspondre les clés d'objet et cela n'a aucun sens

Donc, en gros, juste une méthode où vous itérez sur cet objet et avez une logique pour en extraire les données requises? Je suppose que cela fonctionnerait aussi ... J'ai essayé de faire une implémentation qui ressemble à quelque chose comme ça dans ma réponse ci-dessous, mais cela ne semble pas propre.

@ManavM il pourrait être implémenté de différentes manières, par exemple utiliser une fermeture pour capturer le contexte avec des valeurs constantes et une logique pour itérer sur les clés d'objet. Cependant, je ne suggère fortement pas d'aller de cette façon. Votre réponse est une autre façon, vous avez des propriétés inversées, mais dans ce cas, cela enfreint certains concepts de lisibilité, cela pourrait être lu comme "attribuer des rôles d'utilisateur à l'URL"

Je suis d'accord ... Eh bien, merci d'avoir pris le temps d'expliquer davantage votre réponse.

@ManavM, vous êtes les bienvenus, c'est vraiment bien que vous essayiez de trouver de meilleures solutions!

1
votes

Vous pouvez créer une route par défaut comme celle-ci:

function user3(user) {
  const routes = {
    "www.google.com": ["admin", "manager"],
    "www.exampledomain.com": ["purchaser"]
  };

  return Object.keys(routes).find(k => routes[k].includes(user));
}

console.log(user3('manager')); //www.google.com

ou cela

function user2() {
  const defaultRoute = "www.exampledomain.com"
  return ({
    'someoneElse': "www.google.com",
    'purchaser': 'https://stackoverflow.com'
  })[user] || defaultRoute;
}

ou mélanger les deux styles, selon la complexité de votre déclaration est;

ou même le faire de l'autre côté

function user() {
  const defaultRoute = "www.exampledomain.com"
  return ({
    'admin': defaultRoute,
    'manager': defaultRoute,
    'purchaser': 'https://stackoverflow.com'
  })[user];
}

0 commentaires

1
votes

Si le problème devait être considéré isolément, je résoudrais ce problème en inversant simplement la structure de données autour de

const get_link = (type) => {
  for (let key in linkToTypeMapping) {
    if(linkToTypeMapping.includes(type)) {
      return key;
    }
  }
}

Mais cela ne résout pas vraiment votre problème.

La façon dont je résoudrais le cas d'utilisation réel est d'ajouter simplement une propriété link à votre objet utilisateur et de simplement remplir et d'accéder ultérieurement à userObject.link . p>

Cependant, par souci d'exhaustivité, voici comment extraire le lien d'un utilisateur de la structure de données que j'ai publiée ci-dessus.

const linkToTypeMapping = {
  'www.exampledomain.com': ['admin', 'manager'],
  'https://stackoverflow.com': ['purchaser'],
}

Ceci est évidemment très compliqué en ce qui concerne le le code va, mais si votre objet linkToTypeMapping est censé devenir assez volumineux, cela pourrait en fait être la bonne solution pour vous.

0 commentaires