0
votes

Réacteur-natif pour la boucle à l'aide de la flambée est une erreur

Je suis nouveau dans la programmation. Je voudrais rendant la liste de manière dynamique. Le composant parent NAVBAR a un état avec une catégorie de type alimentaire comme mexicain, chinois. Chacun des produits alimentaires a leur menu respectif

Ce que j'aime, c'est de rendre la première nourriture de nourriture, puis de son menu respectif en Flatlist. Les données sont enregistrées dans le composant NAVBAR. Je peux rendre la nourriture de la nourriture à l'aide de la plate-forme, mais le problème est de la logique de boucle. La boucle de la boucle me donne une erreur. S'il vous plaît voir le sandbox:

https://codesandbox.io/s/s/s/s affamé-lamarr-p8mq3

Le code concerné est ci-dessous (ligne 130-154), dans le composant de menu xxx

javascript reactjs react-native jquery react-redux

1 commentaires

Je vous remercie tous pour les précieux commentaires. J'ai eu ce que je voulais. S'il vous plaît voir le code

4 Réponses :

0
votes

Utilisez une liste plate imbriquée une liste de plis vertical et horizontal pour obtenir l'interface utilisateur

Vérifiez ci-dessous le code Snack: https://snack.expo.io/@ashwith00/list

code: xxx

1 commentaires

Merci. Mais j'ai besoin de rendre les premiers chinois de FoodType, puis de son menu, puis de mexicain de type alimentaire, puis de son menu. Donc, je dois faire une itération chacun de l'article

0
votes

Vous devez modifier votre fonction rendu () code> de cette manière:

render() {

    return (
        <View className="container-fluid">

            <Text> Here use Flatlist</Text>

            <FlatList
                data={this.props.Objs_Type}
                renderItem={({ item }) => (
                    <View>
                        <Text>{item.FoodType}</Text>
                        <Text>{item.Menu}</Text>
                    </View>
                )}
                keyExtractor={(item, index) => item.id}
            />

        </View>

    )
}

0 commentaires

0
votes

L'erreur que j'ai vue dans le lien Sandbox que vous avez fourni est "Jeton inattendu". Chaque fois que vous obtenez cette erreur, il est probablement probablement dû à une erreur syntaxique. Dans votre cas, il manquait des bretelles frisées autour de votre boucle. N'oubliez pas que lorsque vous avez incorporé un code JavaScript dans un bloc JSX, assurez-vous d'encapsuler les codes JavaScript dans les bretelles frisées.

  render() {
    return (
      <View className="container-fluid">
        <Text> Here use Flatlist </Text>
        {
          this.generateFlatList(this.props.Objs_Type)
        }
      </View>
    );
  }

  generateFlatList(objsTypes) {
    console.log(objsTypes);
    return (
      <FlatList
        data={objsTypes}
        renderItem={({item}) => <Text>{item.FoodType}</Text>}
        keyExtractor={(item) => item.id}
      />
    );
  }

2 commentaires

Merci pour le conseil. Mais j'ai besoin de rendre les premiers chinois à partir de la nourriture, puis de son menu, puis de Mexican FRM FoodType, puis de son menu. Donc, je dois faire une itération chacun de l'article

@salabb je pense que le Le composant de sélection doit suffire à votre exigence. Voici un Exemple à l'aide de la sélection de sélection.

0
votes

Merci à tous pour les précieux commentaires. M'a aidé à apprendre beaucoup. Si quelqu'un est intéressé, ci-dessous est le code corrigé

  <View className="container-fluid">
        <Text> Here use Flatlist</Text>

        <FlatList
          data={this.props.Objs_Type}
          renderItem={({ item }) => (
            <React.Fragment>
              <Text>{item.FoodType}</Text>
              {item.Menu.map(e => (
                <Text>{e}</Text>
              ))}
            </React.Fragment>
          )}
          keyExtractor={item => item.id}
        />
      </View>

0 commentaires