next.js Vercel部署失败，因为map()函数正在Map属性

bzzcjhmw  于 2022-11-23  发布在  其他
关注(0)|答案(1)|浏览(123)

提前感谢你阅读并试图解决我的问题。
我正在构建下一个js应用程序，当我尝试在Vercel上部署我的应用程序时，部署失败。
这是我得到的错误：

TypeError: Cannot read properties of undefined (reading 'map')
    at MenuList (/vercel/path0/.next/server/chunks/3184.js:26:29)
    at Wc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at bd (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:77:404)
info  - Generating static pages (21/28)
Error occurred prerendering page "/components/SmallComponents/Menu/MenuList". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of undefined (reading 'map')
    at MenuList (/vercel/path0/.next/server/chunks/3184.js:26:29)
    at Wc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
    at bd (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:77:404)
info  - Generating static pages (28/28)
> Build error occurred
Error: Export encountered errors on following paths:
    /components/SmallComponents/Menu/MenuList
    at /vercel/path0/node_modules/next/dist/export/index.js:405:19
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
    at async /vercel/path0/node_modules/next/dist/build/index.js:1263:21
    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
    at async /vercel/path0/node_modules/next/dist/build/index.js:1123:17
    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
    at async Object.build [as default] (/vercel/path0/node_modules/next/dist/build/index.js:64:29)
Error: Command "npm run build" exited with 1

我发现这个错误的原因是props。当我第一次在vercel上部署我的应用程序时，我遇到了两个这样的错误。我设法通过简单地将我Map的道具移动到我需要它们的文件中来修复一个错误，但对于这个错误，我必须使用props。当在localhost上部署应用程序时，代码是正确的，没有错误表明道具或Map它们的方式有问题。
我的代码：

function MenuList( { drinkName, drinkList } ) {
  return (
    <div data-aos="fade-up" data-aos-duration="1500" 
    className=" flex flex-wrap flex-col
    p-1 py-2 pr-5 w-1/2 max75:w-full">

      <div className="text-white text-lg font-bold mb-4" >
        {drinkName}
      </div>
  
      {drinkList.map((item, index) => (

        <div className=" 
        flex justify-between py-1
        max27:text-xsm text-white"
      
        key={index}>

          <p >{item.name}</p>

          <span >{item.price} €</span>

        </div>

      ))}

    </div>
  )
}

export default MenuList

我的道具：
在代码中查找{/------------PROPS USED HERE-----------/} this，这样就不必阅读整个代码。

function Type() {

    const images = [
        {
            image: <FontAwesomeIcon className=" text-3xl" icon={faWineBottle} />,
            name: "Champaign",
        },
        {
            image: <FontAwesomeIcon className=" text-3xl" icon={faWineGlass} />,
            name: "Wine"
        },
        {
            image: <FontAwesomeIcon className=" text-3xl" icon={faMartiniGlass} />,
            name: "Coctails"
        },
        {
            image: <FontAwesomeIcon className=" text-3xl" icon={faGlassWater} />,
            name: "Non-alcoholic"
        },
        {
            image: <FontAwesomeIcon className=" text-3xl" icon={faBowlFood} />,
            name: "Food"
        },
    ]

    const Heißgetränke = {
        title: "Heißgetränke",
        collection: [
            {
                name: "Verlängerter",
                price: '2.90'
            },
            {
                name: "Cappuccino",
                price: '3.20'
            },
            {
                name: "Caffe Latte",
                price: '3.50'
            },
            {
                name: "Kleiner Brauner",
                price: '2.60'
            },
            {
                name: "Großer Brauner",
                price: '3.90'
            },
            {
                name: "Espresso",
                price: '2.60'
            },
            {
                name: "Tee div, Sorten",
                price: '2.60'
            },
        ]
    }

    const BioLimonaden = {
        title: "BioLimonaden",
        collection: [
            {
                name: "Lemon Prickelnd",
                price: '4.20'
            },
            {
                name: "Lemon Still",
                price: '3.90'
            },
            {
                name: "Kirsche Prickelnd",
                price: '4.20'
            },
            {
                name: "Kirsche Stillr",
                price: '3.90'
            },
            {
                name: "Gruntee-Kaktusfeige Prickelnd",
                price: '4.20'
            },
            {
                name: "Gruntee-Kaktusfeige Still",
                price: '3.90'
            }
        ]
    }

    const Soda = {
        title: "Soda, Mineral",
        collection: [
            {
                name: "Römerquelle Prickelnd",
                price: '2.90'
            },
            {
                name: "Römerquelle Still",
                price: '2.90'
            },
            {
                name: "Soda Zitrone",
                price: '2.90'
            },
        ]
    }

    const RedWine = {
        title: "Red Wine",
        collection: [
            {
                name: "Brunello Di Montalcino",
                price: '12.60'
            },
            {
                name: "Petradonice Super",
                price: '9.50'
            },
            {
                name: "Primitivo Di Manduria",
                price: '13.00'
            },
            {
                name: "Barbaresco",
                price: '15.00'
            },
            {
                name: "Mazzei - Zisola",
                price: '15.00'
            },
        ]
    }

    const WhiteWine = {
        title: "White Wine",
        collection: [
            {
                name: "Gewurztraminer",
                price: '12.60'
            },
            {
                name: "Pinot Grigio",
                price: '9.50'
            },
            {
                name: "Terlaner Classico",
                price: '13.00'
            },
            {
                name: "Jermann - Pinot Grigio",
                price: '15.00'
            },
            {
                name: "Edda Binaco Salento",
                price: '15.00'
            },
        ]
    }

    const DryMartini = {
        title: "Dry Martini",
        collection: [
            {
                name: "Classic Dry Martini",
                price: '5.60'
            },
            {
                name: "Dirty Martini",
                price: '6.50'
            },
            {
                name: "French Martini",
                price: '4.00'
            },
            {
                name: "Bikini Martini",
                price: '5.00'
            },
            {
                name: "Chocolate Martini",
                price: '6.00'
            },
            {
                name: "Lemon Drop Martini",
                price: '4.00'
            },
            {
                name: "Pomegranate Martini",
                price: '7.00'
            },
            {
                name: "Espresso Martini",
                price: '6.00'
            },
        ]
    }

    const MoscowMule = {
        title: "Moscow Mule",
        collection: [
            {
                name: "Mexican Mule",
                price: '5.60'
            },
            {
                name: "Kentucky Mule",
                price: '5.50'
            },
            {
                name: "Gin Buck",
                price: '6.00'
            },
            {
                name: "Dark 'n Stormy",
                price: '4.00'
            },
            {
                name: "Irish Mule",
                price: '4.00'
            },
        ]
    }

    const NonAlchocolic = {
        title: "Non-Alchocolic",
        collection: [
            {
                name: "Redbull",
                price: '5.60'
            },
            {
                name: "Fanta",
                price: '5.50'
            },
            {
                name: "Pepsi",
                price: '6.00'
            },
            {
                name: "Tea",
                price: '4.00'
            },
            {
                name: "Mineral",
                price: '4.00'
            },
        ]
    }

    const Burgers = {
        title: "Burgers",
        collection: [
            {
                name: "Big",
                price: '9.60'
            },
            {
                name: "Medium",
                price: '7.50'
            },
            {
                name: "Small",
                price: '6.00'
            },
        ]
    }

    const Pizza = {
        title: "Pizza",
        collection: [
            {
                name: "Magherita",
                price: '5.60'
            },
            {
                name: "Pepperoni",
                price: '5.50'
            },
            {
                name: "Cappriciosa",
                price: '6.00'
            },
        ]
    }

    const Extra = {
        title: "Extra",
        collection:[ {
            name: "Fries",
            price: '4.00'
            },
            {
                name: "Salad",
                price: '4.00'
            },
        ]
    }

  return (
    <div className='flex flex-col' >

        <TabGroup numTabs={5} direction={TabGroup.direction.HORIZONTAL}>

            <div 
            className=" flex w-full my-6 overflow-x-auto"
            data-aos="fade-up" data-aos-duration="1500">
            
                {images.map((item, index) => (
                    
                    <div className="transition-all w-full" key={index}>
                        <TabGroup.TabList>
                            <TabGroup.Tab
                            index={index}
                            className="     
                            hover:bg-cus-yellow/90 hover:text-black
                            font-bold cursor-pointer
                            transition-all
                            w-full min-w-[130px]
                            p-4 max75:p-0 max100:px-2 max75:px-0 max75:py-4 max45:px-0
                            flex items-center justify-center flex-col"
                            activeClassName="bg-cus-yellow text-black"
                            inactiveClassName="bg-zinc-900 text-cus-yellow "
                            >

                                {item.image}

                                {item.name}
                                
                            </TabGroup.Tab>
                        </TabGroup.TabList>
                  <//  
                    </div>

                ))}

            </div>
                       
            {/* ----------------------------PROPS USED HERE---------------------------- */}
        
            <TabGroup.TabPanel 
            index={0} 
            activeClassName="opacity-100 duration-500 translate-x-0"
            inactiveClassName="absolute opacity-0 -translate-x-2"
            >

                <div className=" flex flex-wrap max75:flex-col w-full">

                    <MenuList drinkName={Heißgetränke.title} drinkList={Heißgetränke.collection} />
                    
                    <MenuList drinkName={BioLimonaden.title} drinkList={BioLimonaden.collection} />

                    <MenuList drinkName={Soda.title} drinkList={Soda.collection} />

                </div>

            </TabGroup.TabPanel>

            <TabGroup.TabPanel 
            index={1} 
            activeClassName="opacity-100 duration-500 translate-x-0"
            inactiveClassName="absolute opacity-0 -translate-x-2"
            >
                
                <div className=" flex flex-wrap max75:flex-col w-full">

                    <MenuList drinkName={RedWine.title} drinkList={RedWine.collection} />
                    
                    <MenuList drinkName={WhiteWine.title} drinkList={WhiteWine.collection} />

                </div>

            </TabGroup.TabPanel>

            <TabGroup.TabPanel 
            index={2} 
            activeClassName="opacity-100 duration-500 translate-x-0"
            inactiveClassName="absolute opacity-0 -translate-x-2"
            >
                
                <div className=" flex flex-wrap max75:flex-col w-full">

                    <MenuList drinkName={DryMartini.title} drinkList={DryMartini.collection} />
                    
                    <MenuList drinkName={MoscowMule.title} drinkList={MoscowMule.collection} />

                </div>

            </TabGroup.TabPanel>

            <TabGroup.TabPanel 
            index={3} 
            activeClassName="opacity-100 duration-500 translate-x-0"
            inactiveClassName="absolute opacity-0 -translate-x-2"
            >
                
                <div className=" flex flex-wrap max75:flex-col w-full">

                    <MenuList drinkName={NonAlchocolic.title} drinkList={NonAlchocolic.collection} />

                </div>

            </TabGroup.TabPanel>

            <TabGroup.TabPanel 
            index={4} 
            activeClassName="opacity-100 duration-500 translate-x-0"
            inactiveClassName="absolute opacity-0 -translate-x-2"
            >
                
                <div className=" flex flex-wrap max75:flex-col w-full">

                    <MenuList drinkName={Burgers.title} drinkList={Burgers.collection} />
                    
                    <MenuList drinkName={Pizza.title} drinkList={Pizza.collection} />

                    <MenuList drinkName={Extra.title} drinkList={Extra.collection} />

                </div>

            </TabGroup.TabPanel>    
        </TabGroup>
    </div>

  )
}

export default Type
next.js

1条答案

按热度按时间
t8e9dugd

t8e9dugd1#

通过将我的道具保存在useState()中修复了它
解决方法：

import { useState, useEffect } from "react";

function MenuList( { drinkName, drinkList } ) {

  const [ name, setName ] = useState([])

  const [ list, setList ] = useState([])

  

  useEffect(() => {
    setName(drinkName)
    setList(drinkList)
  }, [])

  return (
    <div data-aos="fade-up" data-aos-duration="1500" 
    className=" flex flex-wrap flex-col
    p-1 py-2 pr-5 w-1/2 max75:w-full">

      <div className="text-white text-lg font-bold mb-4" >
        {name}
      </div>
  
      {list.map((item, index) => (

        <div className=" 
        flex justify-between py-1
        max27:text-xsm text-white"
      
        key={index}>

          <p >{item.name}</p>

          <span >{item.price} €</span>

        </div>

      ))}

    </div>
  )
}

export default MenuList
赞(0）分享  回复(0）举报  2022-11-23
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com