0
votes

Remplacement de true / false / null dans le rendu React Map par des chaînes "true / false / null"

Disons que dans React je suis en train d'itérer un retour de données JSON dans l'état this.state.searchData et certaines des valeurs qui retournent contiennent true ou false ou null de l'appel de l'API comme ceux-ci:

{Object.entries(this.state.searchData).map(([key, value]) => (
  <ul>
    *** test key value here for null, false or true and output string "null, false or true"
    <li>{key} : {value}</li>
  </ul>
   )
  )
}

Pour l'itération de la carte ci-dessous, comment testerais-je chacune de ces valeurs dans le clé / valeur, puis les remplacer par la chaîne "true", ou "false" ou "null" pour apparaître dans le rendu dans le navigateur? À l'heure actuelle, mon code rend tout correctement jusqu'à ce qu'il rencontre vrai, faux ou nul dans une valeur de la clé et qu'il ne rend rien / vide

   "active": true,
   "partition": null,
   "auth": false

javascript reactjs node.js ecmascript-6

0 commentaires

3 Réponses :

2
votes

Utilisez l'objet String pour obtenir la représentation sous forme de chaîne https://developer.mozilla.org/en- US / docs / Web / JavaScript / Reference / Global_Objects / String

<li>{key} : {String(value)}</li>

0 commentaires

2
votes

Dans la création de modèles React / JSX, les valeurs booléennes / nulles / non définies ne seront pas rendues car elles sont également utilisées pour le rendu conditionnel.

Référence : https://reactjs.org/ docs / jsx-in-depth.html # booleans-null-and-undefined-are-ignored

Mais vous pouvez convertir en chaîne et le rendre?

<h1>{String(true)}</h1>
<h2>{String(false)}</h2>
<h2>{String(null)}</h2>

Tout ce qui précède sera rendu sous forme de chaîne.

0 commentaires

0
votes

Utilisez Array.reduce

let data = {
  "active": true,
  "partition": null,
  "auth": false,
  "Valued": "MyValue"
};

let asTextData = Object.entries(data).reduce((result, [key, value]) => {
  let item = {}
  switch (value) {
    case null:
      item[key]="null";
      return {...result,...item}
    case true:
      item[key]="true";
      return {...result,...item} 
    case false:
      item[key]="false";
      return {...result,...item}
    default :
      item[key]=value;
      return {...result,...item}
  }
},{});

console.log(asTextData);

Vous pouvez également diffuser en utilisant String () , mais si vous l'utilisez dans le temps de rendu et que vous avez d'autres types de valeurs comme des nombres entiers ou des flottants, vous devrez peut-être les convertir à nouveau en nombre.

0 commentaires