https://codesandbox.io/s/reverent-hermann-so8dg

J'ai essayé de mapper via un tableau de listes que j'ai créé et je peux ajouter un <li> avec ce que l'utilisateur a tapé. Mais j'ai toutes mes informations dans un tableau que j'aimerais ajouter des lignes après chaque appel d'API.

0
Austin Lee 17 févr. 2020 à 05:08

1 réponse

Meilleure réponse

Sur la base de votre code, j'ai essayé de travailler sur votre objectif. Donc, en utilisant ce que vous aviez, j'ai mis à jour votre fichier de liste de tables et le fichier de nutrition.

La façon dont j'ai rendu votre table dynamique était au lieu de passer un aliment dans votre composant TableList, il faut une liste d'objets alimentaires qu'il mappe ensuite pour créer une ligne pour chacun. La foodList est une version modifiée de votre liste, c'est là qu'un objet contenant vos informations alimentaires est ajouté

La structure de l'objet alimentaire est :

  const foodObject = {
                calories: responseData.nf_calories,
                protein: responseData.nf_protein,
                food: responseData.item_name
              };

Et l'ajouter à la liste se fait comme ceci :

          setFoodList([...foodList, foodObject]);

Où le foodObject est ajouté à la liste d'aliments précédente via la déstructuration.

Le bac à sable du code mis à jour est ici https://codesandbox.io/s/infallible-morse- migman?fontsize=14&hidenavigation=1&theme=dark

J'espère que vous pourrez regarder les changements et trouver quelque chose d'utile

Bonne chance: D

Si vous avez besoin d'une autre aide ou explication, n'hésitez pas à demander, heureux de vous aider :)

0
AntTargett 17 févr. 2020 à 04:07