J'essaie de mapper un tableau d'objets d'interface dactylographiés et d'imprimer ses valeurs dans une table. Mon tableau ressemble à ceci:

export interface data {
                fields?: field[];
            }

export interface field {
                name: string;
                description: string;
                subfields: subfield[];
            }

Mais je veux imprimer uniquement ce field qui a field.name égal à requiredName

Lors de l'utilisation de l'opérateur ternaire pour définir la condition, j'obtiens l'erreur suivante: Expected an assignment or function call and instead saw an expression

J'apprécierais de l'aide pour définir des instructions conditionnelles pour mapper mon objet. J'ai également utilisé l'opérateur ternaire auparavant, mais uniquement pour imprimer la valeur dans une cellule de tableau au lieu d'en créer une de manière dynamique.

Voici mon code pour le moment:

           <Table>
            <TableBody>
              <TableRow >
                <TableCell>
                {props.fields.map((it) =>
                  {it.name===requiredName ? (
                    <Table>...</Table>
                  ) : (
                    null
                  )}
                )} 
                </TableCell>
              </TableRow>
            </TableBody>
          </Table>

Merci d'avance.

0
moirK 2 sept. 2020 à 16:26

2 réponses

Meilleure réponse

Il vous manque l'instruction de retour devant votre opérateur ternaire.

Ça devrait être:

return it.name===requiredName ? (
                    <Table>...</Table>
                  ) : (
                    null
                  )
1
Robert Kossendey 2 sept. 2020 à 13:29

Vous avez des accolades dans votre fonction de flèche, et par conséquent, votre opérateur ternaire est exécuté en tant qu'instruction dans le corps de la fonction, mais n'est pas renvoyé.

Voici ce que vous avez actuellement: (Je viens d'ajouter l'implicite return undefined au corps de la fonction.)

<TableCell>
  {props.fields.map((it) => {
    it.name===requiredName ? (<Table>...</Table>) : (null)
    return undefined
    }
  )} 
</TableCell>

Le résultat de votre fonction de mappage est donc un tableau contenant uniquement des valeurs undefined.

Vous avez probablement voulu le faire (notez les accolades absentes, qui font que la fonction flèche renvoie la valeur du ternaire):

<TableCell>
  {props.fields.map((it) => 
    it.name===requiredName ? (<Table>...</Table>) : (null)
  )} 
</TableCell>
1
Leo 2 sept. 2020 à 13:50