Question

我最大的问题是，自从课程分配的第一周以来，我一直无法显示我的react应用。我现在第二周结束了，自从课程通过coursera.org在线以来，我已经处理了第二个星期的作业。从第一周开始，我就结束了作业，并且一遍又一遍地观看了视频，并在仔细搜索了许多正确代码的答案之后进行了多次修订。我还浏览了该课程提供的第一周的资源。

我在一周的讨论板上发布了很多次，并遵循给出的建议。我仍然无法显示react应用，因此我在第二周的作业中调了一个，然后继续进行。

经过两个多星期的反复试验，并遵循了Visual Studio的错误提示（这是本课程要使用的提示），我终于开始就需要解决的错误获得一些建议。编辑器通过cmd窗口。每次我进行更正并再次运行yarn时，该应用程序都会开始让我知道需要修复的代码。下图是我得到的最后一个错误。任何建议都将不胜感激。

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

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(){
  
}

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

Error page from React App

任何建议都将不胜感激！

ty

Mildred

Answer 1

如错误所示，您试图在已经存在名为“ 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 () {

}

就像下面评论中的克里斯points out一样，您似乎根本不想导出底部的空Menu功能，也许是想导出Millie组件？在这种情况下，只需将最后的默认导出替换为：

export default Millie;

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

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

Answer 2

变态！很高兴您正在练习，课程很棒，可以学习基础知识。

如您所提供的错误中所述，“菜单”被声明两次。如果检查代码段，可以看到从库中导入了“菜单”，但还声明了一个名为“菜单”的函数。

那是该错误的来源。只需将默认函数更改为任何其他名称，例如“ MyMenu”

尝试导出功能组件后，如何解决React App上的错误？

2 个答案: