如何在React Native中使用Map在屏幕上显示列表中的值

hivapdat  于 2022-11-17  发布在  React
关注(0)|答案(1)|浏览(132)

我是一个新的本地React者,我试图在屏幕上显示成分列表中的数据,但是在使用JSX时,我在语法上遇到了麻烦。
我在指示的花括号周围看到一条红色模糊线,这表明我有语法错误。请告诉我如何才能完成此任务。

import React, { useEffect, useContext, useState } from "react";
import { View, Text, StyleSheet } from "react-native";

    const BadFood = (ingredients) => {
       return (
           <View>
               <Text>
                Bad Ingredients
               </Text>
               {ingredients.map(ing)=> (
                   <View>
                       <Text>{ing}</Text>
                   </View> 
               )} 
           </View> //fuzzy line in the curly brace above this
       )
    }
zd287kbt

zd287kbt1#

您的代码中存在几个问题

import React, { useEffect, useContext, useState } from "react";
import { View, Text, StyleSheet } from "react-native";

// ingredients is in props.ingredients so destructure it 
const BadFood = ({ingredients}) => {
   return (
       <View>
           <Text>
            Bad Ingredients
           </Text>
           {ingredients.map((ing)=> (
               <View>
                   <Text>{ing}</Text>
               </View> 
           )// missing closing brace of map function
          )} 
       </View> //fuzzy line in the curly brace above this
   )
}

请查看react-native语法,您需要查看示例代码。

相关问题