0
votes

Rendu à partir de la réaction en boucle native

Je veux parcourir un objet imbriqué et rendre pour chaque élément un élément de texte dans react native.

          <>
            {Object.values(translationToWeekDays).forEach((week) => {
              Object.values(week).forEach((day) => (
                <Row>
                  <Text>
                    {day}
                  </Text>
                </Row>
              ));
            })}
          </>

C'est l'objet, et c'est mon code actuel

const translationToWeekDays = {
fr_FR: {
  Monday: lundi,
  Tuesday: mardi,
  Wednesday: mercredi,
  Thursday: jeudi,
  Friday: vendredi,
},
};

des directions pour savoir où je vais mal? :(

javascript reactjs react-native foreach

0 commentaires

3 Réponses :

0
votes

Je ne peux pas faire de commentaire mais assurez-vous d'utiliser la carte car elle peut renvoyer jsx ...

<>
            {translationToWeekDays.map((week) => {
              Object.values(week).map((day) => (
                <Row>
                  <Text>
                    {day}
                  </Text>
                </Row>
              ));
            })}
          </>

const translationToWeekDays = [
[
  lundi,
  mardi,
  mercredi,
  jeudi,
  vendredi
],
];

5 commentaires

Toujours pas de rendu :(

Oh j'ai mal lu votre message .... vous devriez utiliser un tableau et non un objet imbriqué .. mettra à jour le code

ce que vous pouvez faire à la place si vous souhaitez utiliser la fonction de carte est de le changer en tableau et de vérifier les dates par index

Est-ce que je ne peux pas le faire fonctionner sans changer l'objet? Je voudrais garder l'objet, il doit y avoir un moyen de rendre dans une boucle avec itération sur l'objet imbriqué

y a-t-il d'autres langues dans l'objet parent?

0
votes

Pour résoudre votre problème, vous pouvez essayer ceci, cela peut être possible sans changer l'objet d'origine.

const translationToWeekDays = {
  fr_FR: {
    Monday: "lundi",
    Tuesday: "mardi",
    Wednesday: "mercredi",
    Thursday: "jeudi",
    Friday: "vendredi"
  }
};

export default function App() 
{

  let daysTranslation = []

  for (let day in translationToWeekDays.fr_FR) 
  {
    daysTranslation.push({
      id: day,
      value: translationToWeekDays.fr_FR[day]
    })
  }


  const daysTranslated = daysTranslation.map(item =>
    {
      return <Text>{item.value}</Text>
    })



  return (
    <Row>
      {daysTranslated}
    </Row>
  );
}

Cependant, utiliser Flatlist mieux que le mappage. Mais cela devrait fonctionner pour une petite liste. Pour boucler sur le contenu, transformer un objet en carte est la meilleure idée

0 commentaires

0
votes

Essayez quelque chose comme ça?

{Object.values (translationToWeekDays) .map ((week) => <> {Object.values (week) .map ((day) =>

{journée}

)} </>)}

1 commentaires

Pour clarifier, .forEach n'a pas de valeur de retour, c'est pourquoi .map fonctionne à la place.