时间戳

首页 > 解决方案 > 尝试导出功能组件后，如何修复 React App 上的错误？

javascript - 尝试导出功能组件后，如何修复 React App 上的错误？

问题描述

我最大的问题是，自课程作业的第一周以来，我一直无法让我的 react 应用程序显示。我在第二周结束时，自从课程通过 coursera.org 在线发布以来，我已经处理了第二个作业好几个星期了。我从第一周开始就完成了作业，一遍又一遍地观看视频，并在谷歌上搜索了很多正确代码的答案后进行了许多修改。我还浏览了该课程提供的第一周的资源。

我在一周的讨论板上多次发布并遵循给出的建议。我仍然无法让 React 应用程序显示，所以我在第 2 周的作业中移动了一个，并继续工作。

经过两个多星期的大量试验和错误并遵循我在本课程中使用的视觉工作室的错误提示，我终于开始获得一些关于我需要在编辑器上修复哪些错误的输入cmd窗口。每次我进行更正并再次运行 yarn start 时，该应用程序开始让我知道我需要修复代码的内容。下图是我得到的最后一个错误。非常感谢任何建议。

这是给我错误的功能组件的代码。

import React from 'react';
import { Card, CardImg, CardImgOverlay, CardTitle, Breadcrumb, BreadcrumbItem } from 'reactstrap';
import {Link } from 'react-router-dom';
import { DishDetail } from 'reactstrap';
import { Menu } from 'reactstrap';

function RenderMenuItem ({dish, onClick}) {
  return(
    <card>
      <Link to={`/menu/${dish.id}`} > 
         <cardImg width = "100%" src ={dish.image} alt={dish.name} />
         <cardImgOverlay>
           <cardTitle>
             {dish.name}
           </cardTitle>
         </cardImgOverlay>
      </Link>
    </card>
  );
}

function Millie  (props) {
  const menu = props.dishes.map((dish)=>{
         return(
           <div key={dish.id} className="col-12 col-md-5 m-1">
             <RenderMenuItem dish={dish} />
           </div>

           );
           });
          }
      return(
          <div className="container">
            <div className="row">
              <Breadcrumb>
              <BreadcrumbItem><Link to="/home">Home</Link></BreadcrumbItem>
              <BreadcrumbItem active>Menu</BreadcrumbItem>
              </Breadcrumb>
              <div className="col-12">
                <h3>Menu</h3>
                <hr />
              </div>
            </div>
            <div className="row">
              {menu}
            </div>
            </div>
          );

          
        
export default function Menu(){
  
}

几乎所有的代码都是由教授提供的。

React App 的错误页面

任何建议都非常感谢！

泰

米尔德里德

标签： javascriptreactjs

解决方案

正如错误所说，当名为“Menu”的东西已经存在时，您试图声明名为“Menu”的东西。

import { Menu } from 'reactstrap';

export default function Menu(){
  
}

重命名菜单功能组件或重命名导入的组件：

// either rename this on import
import { Menu as ReactStrapMenu } from 'reactstrap';

// or call your Menu component something else
export default function MyMenu () {

}

正如 Chris在下面的评论中指出的那样，您似乎根本不打算导出底部的空菜单功能，并且可能打算导出您的 Millie 组件？在这种情况下，只需将最后的默认导出替换为：

export default Millie;

或将其导出到您定义它的同一位置：

export default function Millie (props) {
   const menu = props.dishes.map((dish)=>{
   // etc.
}

推荐阅读