Javascript 反应：常量对象没有输出

我用的是React Native。我正在使用挂钩，但在

碟子中。name

它没有显示任何输出。为什么?

import React, { useState } from 'react';

import {DISHES} from '../shared/dishes';

import { View, Text } from 'react-native';
import MenuComponent from './MenuComponent'

const MainComponents=()=>{
    const [dishes,adddish]=useState([DISHES]);
       return(
          <View style={{padding:100}}>    
              <Text>
                   {dishes.name}
             </Text>
        </View>
    );
}
export default MainComponents;



export const DISHES =
[
    {
        id: 0,
        name:'Uthappizza',
        image: 'images/uthappizza.png',
        category: 'mains',
        label:'Hot',
        price:'4.99',
        featured: true,
        description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.'                    
     },
     {
        id: 1,
        name:'Zucchipakoda',
        image: 'images/zucchipakoda.png',
        category: 'appetizer',
        label:'',
        price:'1.99',
        featured: false,
        description:'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce'
    },
    {
        id: 2,
        name:'Vadonut',
        image: 'images/vadonut.png',
        category: 'appetizer',
        label:'New',
        price:'1.99',
        featured: false,
        description:'A quintessential ConFusion experience, is it a vada or is it a donut?'
    },
    {
        id: 3,
        name:'ElaiCheese Cake',
        image: 'images/elaicheesecake.png',
        category: 'dessert',
        label:'',
        price:'2.99',
        featured: false,
        description:'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms'
    }
];

import React，{useState}来自“React”；
从“../shared/disks”导入{disks}；
从“react native”导入{View，Text}；
从“/MenuComponent”导入MenuComponent
常量main组件=（）=>{
const[disks，adddish]=使用状态（[disks]）；
返回(
{disks.name}
);
}
导出默认主组件；
出口常菜=
[
{
id:0，
名称：'Uthappizza'，
图片：“images/uthappizza.png”，
类别：'干线'，
标签：'热'，
价格：'4.99'，
特写：没错，
描述：“一种独特的印度乌萨帕姆（煎饼）和意大利比萨组合，顶部有樱桃橄榄、成熟的葡萄藤樱桃西红柿、维达利亚洋葱、甘特辣椒和水牛肉饼。”
},
{
id:1，
姓名：'Zucchipakoda'，
图片：“images/zucchipakoda.png”，
类别：“开胃菜”，
标签：“”，
价格：'1.99'，
特色：假，
描述：'油炸西葫芦，涂有轻度香料鹰嘴豆面糊，配以甜味浓郁的罗望子酱'
},
{
id:2，
姓名：'Vadonut'，
图片：“images/vadonut.png”，
类别：“开胃菜”，
标签：'新'，
价格：'1.99'，
特色：假，
描述：“一次典型的困惑体验，它是一个瓦达还是一个甜甜圈？”
},
{
id:3，
名称：'ElaiCheese蛋糕'，
图片：“images/elaicheesecake.png”，
类别:"甜品",，
标签：“”，
价格：'2.99'，
特色：假，
描述：'一种美味的，半甜的纽约式奶酪蛋糕，用格雷厄姆饼干皮和印度豆蔻调味'
}
];

您正在尝试访问数组的属性“.name”，该属性不存在

您需要在数组中循环并获取其中每个对象的属性“.name”。之后，您需要将JSX标记“Text”放在每个“name”的外部，并再次将它们放在数组中

  const MainComponents = () => {
        const [dishes, adddish] = useState(DISHES);
        function renderDishes() {
            const DishesJSX = [];
            DISHES.map(eachDish => {
                DishesJSX.push(<Text>{eachDish.name}</Text>);
            });
            return DishesJSX;
        }
        return <View style={{ padding: 100 }}>{renderDishes()}</View>;
    };
    export default MainComponents;

const main components=（）=>{
const[disks，adddish]=使用状态（disks）；
函数renderdisks（）{
const DishesJSX=[]；
disks.map（eachDish=>{
DishesJSX.push（{eachDish.name}）；
});
返回DishesJSX；
}
返回{renderdisks（）}；
};
导出默认主组件；

什么是

菜肴

？它看起来像一个数组。数组没有属性

名称

。